Observez les événements se déclencher dans un journal en direct, puis copiez les modèles addEventListener pour click, submit, scroll, la délégation, once, passive et le nettoyage avec AbortController.
Un écouteur d'événement est une fonction que le navigateur appelle quand il se passe quelque chose sur un élément, comme un clic, l'envoi d'un formulaire ou un défilement. On l'attache avec element.addEventListener(type, handler, options). L'objet options active once, passive, capture ou un signal d'annulation, et removeEventListener détache plus tard cette même fonction.
Options de addEventListener
Option
Par défaut
Effet
Supprime automatiquement l'écouteur après son premier appel
false (true pour wheel et touch sur window, document et body)
Promet de ne pas appeler preventDefault, le défilement n'attend donc jamais
S'exécute à la descente vers la cible au lieu de la remontée
Un AbortSignal ; l'annuler supprime l'écouteur
Les événements sont plus faciles à comprendre quand on peut les voir. Le journal ci-dessous enregistre chaque appel d'écouteur dans une petite zone de test : vous pouvez cliquer, taper, envoyer et faire défiler, et observer l'ordre, la cible et l'effet de chaque option. Copiez ensuite les modèles correspondant à vos besoins réels.
Utilisez les commandes de la zone de test : cliquez sur les boutons, tapez dans le champ, envoyez le formulaire et faites défiler la boîte.
Chaque appel d'écouteur apparaît dans le journal avec son type d'événement, l'élément qui l'a déclenché et l'élément qui l'a traité.
Activez once pour voir un écouteur disparaître après un appel, ou désactivez la délégation pour voir la liste gérer les clics élément par élément.
Copiez n'importe lequel des exemples ci-dessous. Tous sont en JavaScript pur, sans bibliothèque.
Passez une fonction nommée si vous comptez supprimer l'écouteur. Une fonction fléchée en ligne ne pourra pas être retrouvée plus tard.
AbortController supprime tout un groupe d'écouteurs en un seul appel à abort(), ce qui convient aux composants qui se montent et se démontent.
Écoutez submit sur le formulaire, pas click sur le bouton, pour que la touche Entrée dans un champ soit aussi prise en charge.
Utilisez event.target.closest("selector") dans les gestionnaires délégués. Un clic sur une icône à l'intérieur d'un bouton retrouve quand même le bouton.
focus et blur ne remontent pas. Déléguez plutôt focusin et focusout.
Questions fréquentes
Qu'est-ce que la délégation d'événements ?
Au lieu d'attacher un écouteur à chaque élément, vous en attachez un seul à un parent commun. Comme la plupart des événements remontent, le parent reçoit les clics de tous ses enfants, y compris ceux ajoutés plus tard, et utilise event.target pour savoir lequel a été cliqué.
Pourquoi removeEventListener ne supprime-t-il pas mon écouteur ?
Il doit recevoir la même référence de fonction et le même réglage capture que ceux passés à addEventListener. Deux fonctions fléchées au code identique restent deux fonctions différentes : définissez le gestionnaire une seule fois et passez cette variable les deux fois.
Que fait passive: true ?
Il indique au navigateur que votre gestionnaire n'appellera pas preventDefault, la page peut donc commencer à défiler immédiatement au lieu d'attendre la fin de votre code. Les navigateurs utilisent déjà passive par défaut pour les écouteurs wheel et touch sur window, document et body.
Quelle est la différence entre target et currentTarget ?
target est l'élément le plus profond où l'événement a démarré, et il reste le même pendant la remontée. currentTarget est l'élément dont l'écouteur s'exécute en ce moment, il change donc à chaque niveau.
form.submit() déclenche-t-il l'événement submit ?
Non. Appeler form.submit() depuis un script saute l'événement submit et la validation. Appelez form.requestSubmit() si vous voulez que vos écouteurs submit et les vérifications natives s'exécutent.
addEventListener ou onclick ?
La propriété onclick contient une seule fonction : en assigner une deuxième remplace la première. addEventListener permet à plusieurs écouteurs indépendants de partager un élément et prend en charge l'objet options, c'est donc le meilleur choix par défaut.
Le trajet d'un événement
Un événement déclenché passe par trois phases. Il descend de window jusqu'à la cible pendant la phase de capture, atteint la cible, puis remonte à travers chaque ancêtre. Les écouteurs s'exécutent pendant la phase de remontée, sauf si vous demandez la capture.
stopPropagation interrompt le trajet, les ancêtres ne le reçoivent donc jamais. Utilisez-le rarement, car les écouteurs délégués et les outils d'analyse placés plus haut dans l'arbre cessent alors de fonctionner sans prévenir.
Faire défiler sans ralentir la page
Les événements scroll peuvent se déclencher de nombreuses fois par image de mouvement. Gardez le gestionnaire minuscule, lisez des positions plutôt que de modifier la mise en page, et regroupez les mises à jour visuelles dans requestAnimationFrame.
Pour des tâches comme faire apparaître des éléments quand ils entrent dans la vue, un IntersectionObserver coûte généralement moins cher que de mesurer à chaque défilement. L'événement scrollend, Baseline depuis décembre 2025 selon MDN, se déclenche une fois quand le mouvement s'arrête.
Nettoyer les écouteurs
Les écouteurs placés sur des objets durables comme window ou document gardent en mémoire leur gestionnaire et tout ce qu'il référence. Quand la partie de la page qui en avait besoin disparaît, supprimez-les.
L'option signal rend cela propre. Créez un AbortController par fonctionnalité, passez son signal à chaque écouteur et appelez abort() une seule fois lors du démontage.
Les types d'événements que vous utiliserez le plus
Événements courants et où les écouter
Événement
Se déclenche quand
Remonte ?
Un appui puis un relâchement du pointeur, ou Entrée ou Espace sur un bouton
Oui
La valeur d'un champ change pendant que le visiteur tape
Oui
La valeur d'un champ est validée, par exemple au blur ou à la sélection
Oui
Un formulaire est envoyé ; se déclenche sur l'élément form
Oui
Une touche est enfoncée
Oui
focus / blur
Un élément reçoit ou perd le focus
Non
focusin / focusout
Comme focus et blur, mais avec remontée
Oui
DOMContentLoaded
Le HTML est analysé et les scripts différés ont été exécutés ; écoutez sur document
Sans objet
Modèles à copier
Clic avec un gestionnaire nommé que l'on peut supprimer
C'est le fait de garder la fonction dans une variable qui permet à removeEventListener de fonctionner.
Gérer l'envoi d'un formulaire sans rechargement
preventDefault bloque la navigation propre au navigateur. event.submitter indique quel bouton d'envoi a été utilisé.
Délégation d'événements sur une liste
Un seul écouteur sur la liste gère tous les boutons de suppression, y compris les lignes ajoutées après le chargement de la page.
Un écouteur scroll passif limité à une mise à jour par image
passive: true permet au défilement de démarrer immédiatement, et requestAnimationFrame limite le travail à une fois par image.
once et AbortController
Le premier écouteur s'exécute une seule fois. Les autres sont tous supprimés ensemble par un seul appel à abort().
Raccourci clavier qui ignore la saisie dans les champs
Vérifier la cible empêche le raccourci de se déclencher pendant que quelqu'un tape une barre oblique dans un champ de recherche.
Pommes
Pain
Café
click sur le bouton : target {target}
(once : désormais supprimé)
click arrivé dans la zone de test (phase {phase}) : target {target}, currentTarget {current}
input : la valeur est maintenant "{value}"
change : valeur validée
submit sur le formulaire, submitter {submitter} ; preventDefault a bloqué le rechargement
scroll (passif, un par image) : scrollTop {n}
click délégué sur la liste : élément {item}
écouteur par élément : {item}
Journal d'événements en direct
Cliquez, tapez, envoyez et faites défiler dans la zone de test. Chaque appel d'écouteur est inscrit dans le journal avec son type, sa cible et sa cible courante.