Cours : Les Événements en
JavaScript
1. Introduction
Un événement est une action qui se produit dans le navigateur :
un clic, la saisie d’une touche, le passage de la souris, le chargement d’une
page, etc.
JavaScript permet de réagir à ces actions en exécutant une fonction appelée
gestionnaire d’événement (event handler).
Exemple rapide :
<button onclick="direBonjour()">Cliquer ici</button>
<script>
function direBonjour() {
alert("Bonjour !");
}
</script>
2. Trois façons d’utiliser les événements
2.1. Méthode 1 : Dans le HTML (ancienne méthode)
<button onclick="alert('Bonjour');">Clique-moi</button>
2.2. Méthode 2 : En Javascript avec la propriété
d’événement
<button id="btn">Clique ici</button>
<script>
[Link]("btn").onclick = function() {
Cours : Les Événements en JavaScript 1
alert("Bouton cliqué !");
};
</script>
2.3. Méthode 3 : Avec addEventListener (méthode
moderne)
C’est la meilleure méthode.
<button id="btn">Clique ici</button>
<script>
[Link]("btn").addEventListener("click", function() {
alert("Événement capté !");
});
</script>
3. Les Événements de la souris
Les événements de la souris permettent de détecter les actions de l’utilisateur
avec sa souris.
3.1. click
Se produit lorsqu’on clique sur un élément.
[Link]("click", function() {
[Link]("Clic détecté");
});
3.2. dblclick
Double-clic.
[Link]("dblclick", function() {
[Link]("Double clic !");
Cours : Les Événements en JavaScript 2
});
3.3. mouseover
Quand la souris passe au-dessus de l’élément.
[Link]("mouseover", function() {
[Link] = "red";
});
3.4. mouseout
Quand la souris quitte l’élément.
[Link]("mouseout", function() {
[Link] = "black";
});
3.5. mousedown / mouseup
Appui sur le bouton de la souris / relâchement.
[Link]("mousedown", function() {
[Link]("Bouton de la souris enfoncé");
});
[Link]("mouseup", function() {
[Link]("Bouton relâché");
});
3.6. mousemove
Déplacement de la souris.
[Link]("mousemove", function(event) {
[Link]("X:", [Link], "Y:", [Link]);
});
Cours : Les Événements en JavaScript 3
4. Les Événements du clavier
Ils réagissent aux touches pressées par l’utilisateur.
4.1. keydown
Se déclenche quand une touche est enfoncée.
[Link]("keydown", function(event) {
[Link]("Touche enfoncée :", [Link]);
});
4.2. keyup
Quand la touche est relâchée.
[Link]("keyup", function(event) {
[Link]("Touche relâchée :", [Link]);
});
4.3. keypress
Quand une touche produisant un caractère est pressée.
(Moins utilisé aujourd’hui.)
[Link]("keypress", function(event) {
[Link]("Touche pressée :", [Link]);
});
5. Les Événements sur les formulaires
5.1. change
Quand la valeur d’un champ change.
Cours : Les Événements en JavaScript 4
[Link]("nom").addEventListener("change", function() {
[Link]("Nouvelle valeur :", [Link]);
});
5.2. input
Se déclenche à chaque caractère saisi.
[Link]("nom").addEventListener("input", function() {
[Link]("Saisie :", [Link]);
});
5.3. focus
Quand un champ reçoit le focus (le curseur).
[Link]("focus", function() {
[Link] = "2px solid blue";
});
5.4. blur
Quand un champ perd le focus.
[Link]("blur", function() {
[Link] = "1px solid gray";
});
6. Les Événements liés à la fenêtre
(window)
6.1. load
Quand toute la page (HTML + images) est chargée.
Cours : Les Événements en JavaScript 5
[Link]("load", function() {
[Link]("La page est chargée");
});
6.2. resize
Quand la fenêtre change de taille.
[Link]("resize", function() {
[Link]("Nouvelle taille :", [Link], [Link]);
});
6.3. scroll
Quand l’utilisateur fait défiler la page.
[Link]("scroll", function() {
[Link]("Position du scroll :", [Link]);
});
7. Passage de paramètres dans un
événement
Exemple :
<button id="btn">Tester</button>
<script>
function saluer(nom) {
[Link]("Bonjour " + nom);
}
[Link]("btn").addEventListener("click", function() {
saluer("Fatou");
Cours : Les Événements en JavaScript 6
});
</script>
8. L’objet event
Quand un événement est déclenché, JavaScript envoie un objet event
contenant des informations utiles.
Exemple :
[Link]("click", function(event) {
[Link]("Événement :", [Link]);
[Link]("Élément cliqué :", [Link]);
});
9. Supprimer un événement
function direBonjour() {
[Link]("Bonjour !");
}
[Link]("click", direBonjour);
// Suppression
[Link]("click", direBonjour);
Cours : Les Événements en JavaScript 7