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

JavaScript 对象

JavaScript 参考手册

JS DOM参考手册

HTML DOM addEventListener() 方法

Objet Element HTML DOM

element.addEventListener()方法将事件处理程序附加到指定的元素。

使用element.removeEventListener()方法删除与addEventListener()方法一起附加的事件处理程序。

使用document.addEventListener()方法将事件处理程序附加到文档。

语法：

element.addEventListener(event, listener, useCapture)
var x = document.querySelector("button");
x.addEventListener("click", function() {
alert("Hello World!!!");
});
Testez pour voir‹/›

Compatibilité du navigateur

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

Méthode
addEventListener()1171.09

Valeur des paramètres

ParamètresDescription
event(Obligatoire) L'événement peut être tout événement JavaScript valide. Utilisez l'événement sans préfixe "on", par exemple utilisez "click" à la place de " onclick" ou " 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 é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.
useCapture(Optionnel) Valeur booléenne, indiquant s'il faut exécuter l'événement à l'étape de capture ou de bulle. La valeur par défaut est false.
Valeurs possibles :

  • true-Les gestionnaires d'événements s'exécutent à l'étape de capture

  • false-Les gestionnaires d'événements s'exécutent à l'étape de bulle

Vous pouvez consulter nosTutoriel 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 DOM :DOM 2Niveau

Plus d'exemples

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

document.querySelector("button").addEventListener("click", myFunc);
function myFunc() {
　　　document.body.style.backgroundColor = "coral";
}
Testez pour voir‹/›

Vous pouvez ajouter de nombreux événements à un élément sans remplacer les événements existants :

document.querySelector("button").addEventListener("click", myFunc);
document.querySelector("button").addEventListener("click", anotherFunc);
Testez pour voir‹/›

Vous pouvez ajouter différents types d'événements à un élément :

document.querySelector("button").addEventListener("mouseenter", myFunc1);
document.querySelector("button").addEventListener("click", myFunc2);
document.querySelector("button").addEventListener("mouseout", myFunc3);
Testez pour voir‹/›

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

var btn = document.querySelector("button");
btn.addEventListener("click", function() {
myFunc(x, y);
});
Testez pour voir‹/›

Références associées

Tutoriel JavaScript :Écouteur d'événements

Tutoriel JavaScript :Propagation des événements

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

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

Objet Element HTML DOM

Objet History JavaScriptObjet Element HTML DOM