Document HTML DOM addEventListener()
Exemples
Ajoutez un événement de clic au document :
document.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Syntaxe simplifiée :
document.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 au document.
Voir également:
Tutoriel HTML DOM EventListener
La méthode Document removeEventListener()
Syntaxe
document.addEventListener(event, function, useCapture)
Paramètres
Parameter | Description |
event | Required. The event name. Do not use the "on" prefix. For example, use "click" instead of "onclick". HTML DOM events are listed in Complete HTML DOM Event Object Reference. |
function | Required. The function to run when the event occurs. When the event occurs, an event object is passed to the function as the first parameter. The type of the event object depends on the specified event. For example, the "click" event belongs to the MouseEvent object. |
useCapture |
Optional. A boolean. Specifies if the event should be executed in the capturing or in the bubbling phase (default). true - The event handler is executed in the capturing phase.false - The event handler is executed in the bubbling phase.
|
Valeur de retour
NONE |
Plus d'exemples
Vous pouvez ajouter de nombreux écouteurs d'événement au document :
document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);
Vous pouvez ajouter différents types d'événements :
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);
Lors du passage de paramètres, utilisez une "fonction anonyme" pour appeler une fonction avec les paramètres :
document.addEventListener("click", function() {
myFunction(p1, p2);
});
Modifiez la couleur d'arrière-plan du document :
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
});
Utilisation de la méthode removeEventListener() :
// Add an event listener
document.addEventListener("mousemove", myFunction);
// Remove event listener
document.removeEventListener("mousemove", myFunction);
Prise en charge du navigateur
document.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 |