Module 4Gérer les événements utilisateur
Chapitre 11 sur 15
Réagir aux événements de la souris et du clavier avec addEventListener, la propagation et la délégation.
Objectifs
Avec ce chapitre, tu sauras…
addEventListener() et le retirer avec removeEventListener() ;event (target, type, preventDefault()) ;click, dblclick, mouseenter, mousemove…) ;keydown, keyup, event.key, event.code) ;Leçon 1
| Terme | Définition |
|---|---|
| écouteur d'événement (event listener) | le mécanisme qui attend qu'un événement précis se produise sur un élément |
| gestionnaire d'événement (event handler) | la fonction exécutée quand l'événement se produit |
| Famille | Événements courants |
|---|---|
| souris | click, dblclick, mousedown, mouseup, mousemove, mouseenter, mouseleave, mouseover, mouseout, contextmenu |
| clavier | keydown, keyup |
| formulaire | submit, input, change, focus, blur, reset |
| document et fenêtre | DOMContentLoaded (HTML chargé), load (tout chargé, images comprises), resize, scroll |
| Méthode | Exemple | Avis |
|---|---|---|
| attribut HTML | <button onclick="alert('Bonjour')">Clic</button> | à éviter : mélange HTML et JavaScript |
propriété on... | bouton.onclick = direBonjour; | simple, mais un seul gestionnaire par événement |
addEventListener | bouton.addEventListener("click", direBonjour); | la bonne pratique : plusieurs gestionnaires possibles, retrait possible |
Leçon 2
| Paramètre | Rôle |
|---|---|
evenement | le nom de l'événement, sans « on » : "click", et non "onclick" |
fonction | le gestionnaire : une fonction nommée (sans parenthèses) ou une fonction anonyme |
useCapture | facultatif, false par défaut : choisit la phase de propagation (voir section 6) |
Leçon 3
| Propriété / méthode | Rôle |
|---|---|
e.type | le type de l'événement : "click", "keydown"… |
e.target | l'élément sur lequel l'événement s'est produit (l'élément cliqué) |
e.currentTarget | l'élément qui porte l'écouteur |
e.preventDefault() | annule l'action par défaut du navigateur (suivre un lien, envoyer un formulaire) |
e.stopPropagation() | arrête la propagation vers les parents |
Leçon 4
| Événement | Se déclenche quand… |
|---|---|
mousedown | on enfonce un bouton de la souris |
mouseup | on relâche le bouton |
click | un mousedown puis un mouseup ont lieu sur le même élément |
dblclick | on double-clique |
mousemove | la souris se déplace sur l'élément (se déclenche des dizaines de fois par seconde) |
Leçon 5
| Événement | Se déclenche quand… |
|---|---|
keydown | une touche est enfoncée (se répète si on la maintient) ; avant la modification du champ |
keyup | une touche est relâchée ; après la modification du champ |
keypress | obsolète : remplacé par keydown (ou par l'événement input pour suivre une saisie) |
Propriété de e | Contenu | Touche Z (AZERTY) |
|---|
Leçon 6
Vidéo · À regarder
ENJavaScript DOM Manipulation – Full Course for Beginners
freeCodeCamp.org · YouTube
1Le premier paramètre de addEventListener pour un clic est…
2Pour empêcher un lien d'ouvrir sa page :
3e.target désigne…
4Lors d'un clic, l'ordre des événements est…
5e.button vaut 2 pour…
6Pour savoir quel caractère a été tapé :
7Après un clic sur un enfant, l'événement…
L'essentiel du chapitre
el.addEventListener("click", f) (nom sans « on », fonction sans parenthèses) ; removeEventListener avec la même fonction ; { once: true }.event : type, target, currentTarget, preventDefault(), stopPropagation().click, dblclick, mousedown, mouseup, mousemove, mouseenter / mouseleave ; e.button, e.clientX, e.clientY.keydown, keyup (keypress est obsolète) ; e.key (caractère), e.code (touche physique).e.target.matches() / closest().Vidéo · À regarder
JavaScript DOM Manipulation – Full Course for Beginners
freeCodeCamp.org · YouTube
mouseenter / mouseleave | la souris entre dans l'élément / en sort (les enfants ne comptent pas) |
mouseover / mouseout | comme mouseenter et mouseleave, mais se déclenchent aussi en passant sur les éléments enfants |
contextmenu | clic droit |
Propriété de e | Contenu |
|---|---|
e.button | le bouton utilisé : 0 gauche, 1 milieu (molette), 2 droit, 3 précédent, 4 suivant |
e.clientX, e.clientY | la position par rapport à la zone visible de la page |
e.pageX, e.pageY | la position par rapport à toute la page (défilement compris) |
e.screenX, e.screenY | la position par rapport à l'écran entier |
Vidéo · À regarder
ENJavaScript Full Course for free
Bro Code · YouTube
| Touche Entrée |
|---|
e.key | le caractère produit | "z" | "Enter" |
e.code | la touche physique (position sur un clavier QWERTY) | "KeyW" | "Enter" |
e.ctrlKey, e.shiftKey, e.altKey | true si la touche Ctrl, Maj ou Alt est enfoncée |
Vidéo · À regarder
ENJavaScript Full Course for free
Bro Code · YouTube
Tableau: Trois façons d'associer un gestionnaire
element.addEventListener(evenement, fonction, useCapture);const bouton = document.getElementById("btn");
// 1. une fonction nommée (sans parenthèses)
bouton.addEventListener("click", message);
function message() {
alert("Vous avez cliqué !");
}
// 2. une fonction anonyme, ou fléchée
bouton.addEventListener("click", () => {
console.log("Deuxième gestionnaire du même clic");
});
// 3. plusieurs types d'événements sur le même élément
bouton.addEventListener("mouseover", () => {
bouton.style.background = "red";
bouton.style.padding = "8px";
});
bouton.addEventListener("mouseout", () => {
bouton.style.background = "white";
bouton.style.padding = "2px";
});Retirer un écouteur
const zone = document.querySelector(".style1");
zone.addEventListener("mouseover", fct1);
function fct1() {
console.log("Événement déclenché !");
}
document.querySelector("#btnStop").addEventListener("click", () => {
zone.removeEventListener("mouseover", fct1); // la MÊME fonction qu'à l'ajout
});removeEventListener doit recevoir exactement la même fonction que addEventListener. Une fonction anonyme écrite deux fois crée deux fonctions différentes : elle ne peut donc pas être retirée. Si tu dois retirer un gestionnaire, donne-lui un nom. Pour un gestionnaire qui ne doit servir qu'une fois, utilise l'option { once: true } : bouton.addEventListener("click", f, { once: true });.
Le gestionnaire reçoit automatiquement un objet event (souvent nommé e) qui décrit l'événement.
Quand on clique sur un élément, l'événement se déclenche sur cet élément, puis remonte vers tous ses ancêtres (son parent, le parent de son parent… jusqu'à document) : c'est la phase de bouillonnement (bubbling). Avant elle existe une phase de capture, qui descend de document vers l'élément ; on l'écoute avec useCapture à true.
<div id="carte">
<p id="texte">
<button id="btn">Cliquer</button>
</p>
</div>
<script>
document.querySelector("#btn").addEventListener("click", () => console.log("1. bouton"));
document.querySelector("#texte").addEventListener("click", () => console.log("2. paragraphe"));
document.querySelector("#carte").addEventListener("click", () => console.log("3. div"));
// Clic sur le bouton : 1. bouton, 2. paragraphe, 3. div
</script>La délégation consiste à placer un seul écouteur sur un parent au lieu d'un écouteur sur chaque enfant, puis à utiliser e.target pour savoir quel enfant a été cliqué. Grâce au bouillonnement, le parent reçoit les clics de tous ses enfants, y compris ceux ajoutés plus tard.
const liste = document.querySelector("#taches");
liste.addEventListener("click", (e) => {
if (e.target.matches("button.supprimer")) { // clic sur un bouton Supprimer ?
e.target.closest("li").remove(); // supprime le li qui le contient
} else if (e.target.matches("li")) {
e.target.classList.toggle("faite"); // clic sur la tâche : barrée ou non
}
});Avec 500 lignes dans un tableau, 500 écouteurs consomment de la mémoire, et les lignes ajoutées après coup n'ont pas d'écouteur. Un seul écouteur sur le <table> règle les deux problèmes. e.target.matches(sélecteur) teste si l'élément correspond à un sélecteur, et e.target.closest(sélecteur) remonte vers l'ancêtre le plus proche qui y correspond.
Une page affiche une grande image #principale et, en dessous, une rangée de 5 miniatures dans <div id="miniatures">. Avec un seul écouteur (délégation), un clic sur une miniature remplace l'image principale par celle de la miniature et ajoute la classe active à la miniature cliquée (en la retirant des autres). Un double-clic sur l'image principale l'agrandit en plein écran avec requestFullscreen().
Crée trois boutons « − », « Réinitialiser » et « + » et un <span id="valeur">0</span>. Les boutons modifient la valeur. La valeur ne peut pas descendre sous 0, et elle s'affiche en rouge quand elle dépasse 10. Utilise uniquement addEventListener.
Sur une page contenant un champ de recherche #recherche, fais en sorte que : la touche « / » place le curseur dans le champ (sans écrire le « / »), la touche Échap vide le champ et retire le curseur, et Ctrl + Entrée affiche dans la console « Recherche : » suivi du texte.
Les écouteurs d'événements, puis un exemple complet (en anglais).
document.querySelector("a").addEventListener("click", (e) => {
e.preventDefault(); // le lien n'est pas suivi
console.log(e.type, e.target.href); // click https://...
});mousedown → mouseup → click → mousedown → mouseup → click → dblclickLe résumé écrit que mouseover se déclenche « lorsque le curseur se déplace à l'extérieur d'un élément ». C'est l'inverse : mouseover se déclenche quand le curseur arrive sur l'élément (ou sur un de ses enfants), mouseout quand il le quitte.
Tableau: Le bouton et la position de la souris
<div id="pos" style="background: goldenrod; height: 200px; width: 400px;"></div>
<p id="affichage"></p>
<script>
const pos = document.querySelector("#pos");
const affichage = document.querySelector("#affichage");
pos.addEventListener("mousemove", (e) => {
affichage.textContent =
`Écran X/Y : (${e.screenX}, ${e.screenY}) Client X/Y : (${e.clientX}, ${e.clientY})`;
});
</script>Les événements de la souris (en anglais).
<input type="text" id="message">
<script>
const zone = document.getElementById("message");
zone.addEventListener("keydown", (e) => {
console.log(`key=${e.key}, code=${e.code}`);
if (e.key === "Enter") {
console.log("Validation :", zone.value);
}
});
</script>Le résumé écrit document.getDocumentById('#message'). La méthode s'appelle getElementById, et on lui passe l'id sans # : document.getElementById("message"). Le # ne s'écrit qu'avec querySelector("#message"). Le résumé indique aussi que la touche z donne le code "KeyZ" : c'est vrai sur un clavier QWERTY ; sur un clavier AZERTY, la touche Z est à la place du W, donc e.code vaut "KeyW" alors que e.key vaut bien "z".
Utilise e.key pour savoir quel caractère l'utilisateur a tapé (un raccourci, la touche Entrée, Échap). Utilise e.code quand seule la position de la touche compte, par exemple les touches de déplacement d'un jeu (ZQSD sur AZERTY correspond à KeyW, KeyA, KeyS, KeyD).
Les événements du clavier (en anglais).
La propagation, puis la délégation d'événements (en anglais).