Méthode addEventListener() de Document DOM HTML
- Page précédente activeElement
- Page suivante adoptNode()
- Retour au niveau supérieur Documents DOM HTML
Définition et utilisation
addEventListener() La méthode ajoute un gestionnaire d'événement à un document.
Exemple
Exemple 1
Ajouter un événement click au document :
document.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Syntaxe plus simple :
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
Exemple 2
Vous pouvez ajouter plusieurs écouteurs d'événements au document :
document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);
Exemple 3
Vous pouvez ajouter différents types d'événements :
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);
Exemple 4
Lors de la transmission de paramètres, utilisez une fonction anonyme pour appeler une fonction avec des paramètres :
document.addEventListener("click", function() {
myFunction(p1, p2);
});
Exemple 5
Changer la couleur de fond du document :
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
});
Exemple 6
Utilisez la méthode removeEventListener() :
// Ajouter un écouteur d'événement
document.addEventListener("mousemove", myFunction);
// Supprimer l'écouteur d'événement
document.removeEventListener("mousemove", myFunction);
Syntaxe
document.addEventListener(type, function, capture)
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". Tous les événements HTML DOM sont listés : |
| function |
Obligatoire. Fonction exécutée lors de l'événement. Lorsque l'événement se produit, l'objet événement est passé en tant que premier paramètre à la fonction. Le type de l'objet événement dépend de l'événement spécifié. Par exemple, l'événement "click" appartient à l'objet MouseEvent. |
| capture |
Optionnel (par défaut = false).
|
Valeur de retour
Aucun.
Détails techniques
Cette méthode ajoute la fonction d'écouteur d'événement spécifiée au jeu d'écouteurs du nœud actuel pour traiter les événements du type spécifié. Si capture si elle est définie sur true, l'écouteur est enregistré comme écouteur d'événement de capture. Si capture si elle est définie sur false, elle est enregistrée comme écouteur d'événement normal.
addEventListener() peut être appelée plusieurs fois, enregistrez plusieurs gestionnaires d'événements du même type sur le même nœud. Mais attention, 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 sur le même nœud avec le même type et capture le paramètre est enregistré deux fois, le deuxième enregistrement est ignoré. Si vous traitez un événement sur un nœud et que vous enregistrez un nouvel écouteur d'événement sur ce nœud, l'écouteur d'événement ne sera pas appelé pour cet événement.
Lorsque Node.cloneNode() ou Document.importNode() Lorsque la méthode copie un nœud Document, elle ne copie pas les écouteurs d'événements enregistrés pour le nœud original.
Cette méthode est également définie sur les objets Document et Window, et fonctionne de manière similaire.
Support du navigateur
document.addEventListener C'est une caractéristique 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éthodes de document
Tutoriel
- Page précédente activeElement
- Page suivante adoptNode()
- Retour au niveau supérieur Documents DOM HTML
