Une page ne fait rien tant que personne ne la touche. Un clic, une frappe au clavier, un défilement : chacun de ces gestes produit un événement, que le navigateur envoie à l'élément concerné.
Encore faut-il avoir dit à l'avance quoi en faire. C'est le rôle d'addEventListener.
Définition
addEventListener enregistre une fonction, appelée écouteur, qui sera exécutée chaque fois qu'un type d'événement donné atteint l'élément. Elle reçoit trois arguments : le nom de l'événement, la fonction, et un objet d'options facultatif.
const bouton = document.querySelector("#valider");
bouton.addEventListener("click", (event) => {
console.log("clic sur", event.currentTarget.id);
console.log("bouton de la souris :", event.button);
});L'objet reçu décrit l'événement : l'élément visé, le moment, les touches enfoncées. Il change de forme selon le type, un KeyboardEvent portant une propriété key qu'un MouseEvent n'a pas.
Les options
| Option | Ce qu'elle change |
|---|---|
once | L'écouteur s'exécute une seule fois puis se retire tout seul |
capture | L'écouteur se déclenche à la descente, pas à la remontée |
passive | Promesse de ne pas annuler l'action par défaut, ce qui fluidifie le défilement |
signal | Un signal d'AbortController qui retire l'écouteur au déclenchement |
document.addEventListener("keydown", fermerLaModale, { once: true });
zone.addEventListener("touchstart", suivreLeDoigt, { passive: true });Retirer un écouteur
removeEventListener exige les mêmes arguments que l'enregistrement : même type, même fonction, même valeur de capture. Une fonction anonyme est recréée à chaque évaluation, donc introuvable.
const surClic = () => console.log("clic");
bouton.addEventListener("click", surClic);
bouton.removeEventListener("click", surClic); // retiré
bouton.removeEventListener("click", () => console.log("clic")); // sans effetQuand plusieurs écouteurs doivent disparaître ensemble, un AbortController partagé les coupe tous en un appel.
Enregistrer deux fois la même fonction, pour le même type et les mêmes options, ne l'ajoute qu'une fois : le doublon est ignoré. Deux fonctions anonymes identiques, elles, comptent pour deux.
Pourquoi pas onclick
La propriété onclick fonctionne encore, mais elle ne retient qu'une seule fonction : la seconde affectation écrase la première, en silence. Deux morceaux de code visant le même bouton s'annulent alors.
- Plusieurs écouteurs cohabitent sans se gêner, dans l'ordre où ils ont été ajoutés.
- Les options comme
onceoucapturen'existent pas avec la propriété.
Questions fréquentes
Pourquoi mon removeEventListener ne fait-il rien ?
Parce que la fonction passée au retrait n'est pas la même que celle enregistrée. Deux fonctions au corps identique restent deux objets distincts. Rangez l'écouteur dans une const avant de l'ajouter, ou passez par un signal d'annulation.
Faut-il retirer les écouteurs pour libérer la mémoire ?
Sur un élément retiré du document et devenu inaccessible, le nettoyage se fait tout seul. Le vrai risque concerne les écouteurs posés sur document ou window depuis un composant temporaire : ceux-là s'accumulent à chaque ouverture.
Comment gérer des centaines d'éléments cliquables ?
En n'en écoutant qu'un seul. La Délégation d'événement pose l'écouteur sur un ancêtre commun et retrouve l'élément réel au moment du clic, contenu ajouté plus tard compris. Ce réflexe est travaillé pas à pas dans la formation JavaScript.