DOM - Écouteurs d'événements

Les écouteurs d’événements permettent de vérifier si un événement se produit sur un élément, afin d’exécuter ou non un bout de code particulier.

La méthode addEventListener()

Cette méthode permet d’attribuer un écouteur d’événement à un élément, sans pour autant écraser les écouteurs déjà existants. Il est possible d’ajouter autant d’écouteurs d’événement que souhaité sur un même élément. Il est également possible d’ajouter plusieurs fois le même type d’événement sur un même élément.

De plus, il est possible d’ajouter un écouteur d’événement à n’importe quel élément du DOM, et pas seulement à un élément HTML. Par exemple, il est possible d’ajouter un écouteur d’événement sur l’objet global window.

Syntaxe

Voici la syntaxe permettant d’ajouter un écouteur d’événement à un élément :

element.addEventListener(event, function, useCapture);

Le premier argument est le type d’événement que JavaScript doit écouter. Le deuxième paramètre est la fonction à exécuter lorsque l’événement se produit. Le troisième argument est optionnel.

Exemple :

document.getElementById("myBtn").addEventListener("click", displayDate);

Dans cet exemple, la fonction displayDate() est exécutée lorsque l’utilisateur clique sur le bouton myBtn.

Remarque : Lorsque les événements sont traités directement en JavaScript, il n’y a pas de préfixe “on” avant le nom de l’événement.

Ajouter un écouteur d’événement à un élément