English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Objets JavaScript

Manuel de référence JavaScript

Manuel de référence DOM JS

Méthode addEventListener() du HTML DOM

Objet Document HTML DOM

document.addEventListener()Attache un gestionnaire d'événement au document.

Utilisationdocument.removeEventListener()Supprime les gestionnaires d'événements attachés avec la méthode addEventListener().

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

Syntaxe :

document.addEventListener(event, listener, useCapture)
document.addEventListener("click",　function()　{
alert("Hello World!!!");
});
Vérifiez le test‹/›

Compatibilité du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge la méthode addEventListener() :

Méthode
addEventListener()1171.09

Valeur des paramètres

ParamètresDescription
event(Obligatoire) L'événement peut être n'importe quel événement JavaScript valide. Ne pas utiliser le préfixe "on" lors de l'utilisation de l'événement, par exemple utiliser "click" à la place de " onclick ", "mousedown" à la place de " onmousedown ".
Pour une liste complète de tous les événements HTML DOM, veuillez consulter notreRéférence à l'objet événement HTML DOM.
listener(Obligatoire) Peut être une fonction JavaScript qui répond à l'événement.
Lorsqu'un événement se produit, l'objet de l'événement est passé en tant que premier paramètre à la fonction. Le type de l'objet de l'événement dépend de l'événement spécifié. Par exemple, l'événement "click" appartient à l'objet MouseEvent.
useCapture(Optionnel) Valeur booléenne, indiquant s'il faut exécuter l'événement au niveau de la phase de capture ou de la phase de bulle. La valeur par défaut est false.
Valeurs possibles :

  • true-L'executor de l'événement s'exécute au niveau de la phase de capture

  • false-L'executor de l'événement s'exécute au niveau de la phase de bulle

Vous pouvez trouver sur notreTutoriel sur la propagation des événements JavaScriptPour plus d'informations sur la propagation des événements, lire :

Détails techniques

Valeur de retour :Aucun
Version du DOM :DOM 2Niveau

Plus d'exemples

Ajoutez un événement de clic au document. Lorsque l'utilisateur clique sur n'importe quel endroit du document, utilisez l'élément <p> avec l'id="para" pour afficher "Hello World" :

document.addEventListener("click",　function()　{
document.querySelector("#para").innerHTML = "Hello World!!!";
});
Vérifiez le test‹/›

Cet exemple fait référence à une fonction "nommée" externe :

document.addEventListener("click", myFunc);
function myFunc() {
　　　document.body.style.backgroundColor = "coral";
}
Vérifiez le test‹/›

Vous pouvez ajouter de nombreux événements au document sans couvrir les événements existants :

document.addEventListener("click", myFunc);
document.addEventListener("click", anotherFunc);
Vérifiez le test‹/›

Vous pouvez ajouter différents types d'événements au document :

document.addEventListener("mouseenter",　myFunc1);
document.addEventListener("click",　myFunc2);
document.addEventListener("mouseout",　myFunc3);
Vérifiez le test‹/›

Lorsque vous passez des valeurs de paramètres, utilisez une fonction anonyme qui appelle la fonction spécifiée avec les paramètres :

document.addEventListener("click",　function()　{
myFunc(x,　y);
});
Vérifiez le test‹/›

Vous pouvez également consulter

Tutoriel JavaScript :Écouteurs d'événements

Tutoriel JavaScript :Propagation des événements

Référence HTML DOM :document.removeEventListener()

Référence HTML DOM :element .addEventListener()

Objet Document HTML DOM

Objet Element HTML DOMObjet Document HTML DOM