Élément HTML DOM addEventListener()
Exemples
Ajoutez un événement click à un élément <button> :
element.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Code plus compact :
element.addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Hello World";
});
Plus d'exemples ci-dessous.
Définition et utilisation
La addEventListener()
méthode attache un gestionnaire d'événements à l'élément.
Voir également:
La méthode element.removeEventListener()
La méthode document.addEventListener()
La méthode document.removeEventListener()
Tutoriels
Syntaxe
element.addEventListener(event, function, useCapture)
Paramètres
Parameter | Description |
event | Required. The name of the event. Do not use the "on" prefix. Use "click" not "onclick". The Complete List of DOM Events. |
function | Required. The function to run when the event occurs. |
useCapture |
Optional (default = false).false - The handler is executed in the bubbling phase.true - The handler is executed in the capturing phase.
|
Valeur de retour
RIEN |
Plus d'exemples
Vous pouvez ajouter plusieurs événements au même élément :
element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);
Vous pouvez ajouter différents événements au même élément :
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);
Pour passer des valeurs de paramètre, utilisez une "fonction anonyme":
element.addEventListener("click", function() {
myFunction(p1, p2);
});
Modifiez la couleur d'arrière-plan d'un élément <button> :
element.addEventListener("click", function() {
this.style.backgroundColor = "red";
});
La différence entre bouillonner et capturer :
element1.addEventListener("click", myFunction, false);
element2.addEventListener("click", myFunction, true);
Supprimez un gestionnaire d'événements :
element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);
Prise en charge du navigateur
element.addEventListener()
est une fonctionnalité DOM niveau 2 (2001).
Il est entièrement pris en charge dans tous les navigateurs :
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |