Méthode addEventListener() du DOM HTML

Définition et utilisation

addEventListener() La méthode ajoute un gestionnaire d'événement à un élément.

Exemple

Exemple 1

Ajoutez un événement click à l'élément <button> :

element.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

Essayez-le vous-même

Exemple 2

Code plus compact :

element.addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});

Essayez-le vous-même

Vous trouverez plus d'exemples en bas de la page.

Syntaxe

element.addEventListener(type, function, useCapture)

Paramètres

Paramètres Description
type

Obligatoire. Nom de l'événement.

Ne pas utiliser le préfixe "on".

Utilisez "click" plutôt que "onclick".


Liste complète des événements DOM
function Obligatoire. Fonction exécutée lors de l'événement.
useCapture

Optionnel (par défaut = false).

  • false - L'exécution du gestionnaire se produit au niveau de la bulle.
  • true - L'exécution du gestionnaire se produit au niveau de capture.

Valeur de retour

Aucun.

Détails techniques

Cette méthode ajoutera la fonction d'écouteur d'événement spécifiée à la collection d'écouteurs d'événement du nœud courant pour traiter le type d'événement spécifié. type de l'événement. useCapture à true, l'écouteur est enregistré comme écouteur d'événement de capture. Si useCapture à false, il est enregistré comme écouteur d'événement ordinaire.

addEventListener() peut être appelé plusieurs fois, pour enregistrer plusieurs gestionnaires d'événements du même type sur le même nœud. Cependant, il faut noter que le DOM ne peut pas déterminer l'ordre d'appel des gestionnaires d'événements multiples.

Si une fonction d'écouteur d'événement est enregistrée deux fois avec le même type et useCapture Si un écouteur d'événement est enregistré deux fois avec le même paramètre, la deuxième enregistrement sera ignoré. Si un nouvel écouteur d'événement est enregistré sur un nœud pendant qu'un événement est traité sur ce nœud, l'écouteur d'événement nouvellement enregistré ne sera pas appelé pour cet événement.

Lorsque Node.cloneNode() ou Document.importNode() Lorsque cette méthode copie un nœud Document, elle ne copie pas les écouteurs d'événements enregistrés pour le nœud d'origine.

Cette méthode est également Document et Window Défini sur l'objet et fonctionne de la même manière.

Plus d'exemples

Exemple 3

Vous pouvez ajouter de nombreux événements au même élément :

element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);

Essayez-le vous-même

Exemple 4

Vous pouvez ajouter différents événements au même élément :

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);

Essayez-le vous-même

Exemple 5

Pour transmettre des valeurs de paramètres, utilisez une "fonction anonyme" :

element.addEventListener("click", function() {
  myFunction(p1, p2);
});

Essayez-le vous-même

Exemple 6

Changer la couleur de fond de l'élément <button> :

element.addEventListener("click", function() {
  this.style.backgroundColor = "red";
});

Essayez-le vous-même

Exemple 7

Différences entre la propagation et la capture :

element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);

Essayez-le vous-même

Exemple 8

Suppression du gestionnaire d'événement :

element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);

Essayez-le vous-même

Support du navigateur

element.addEventListener() C'est une fonctionnalité de DOM Level 2 (2001).

Tous les navigateurs le supportent pleinement :

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support

Pages associées

Méthodes d'élément :

Méthode addEventListener()

Méthode removeEventListener()

Méthodes de document :

Méthode addEventListener()

Méthode removeEventListener()

Tutoriel :

HTML DOM EventListener

Liste complète des événements DOM