Exemple
Joindre un événement click sur un <button> élément. Lorsque l'utilisateur clique sur le bouton, la sortie "Hello World" tout le <p> "Hello World" dans un <p> élément avec id = « demo »:
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
}); Essayez vous - même » Plus "Try it Yourself" - "Try it Yourself" exemples ci - dessous.
Définition et utilisation
Le addEventListener() méthode attache un gestionnaire d'événement à l'élément spécifié.
Conseil: Utiliser la removeEventListener() méthode pour supprimer un gestionnaire d'événement qui a été attaché avec le addEventListener() méthode.
Astuce: Utilisez le document. addEventListener() méthode pour attacher un gestionnaire d'événements au document.
Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
Note: Le addEventListener() méthode est pas prise en charge dans Internet Explorer 8 et les versions antérieures et Opera 6.0 et les versions antérieures. Cependant, pour ces versions de navigateur spécifiques, vous pouvez utiliser la attachEvent() méthode pour associer des gestionnaires d'événements (see "More Examples" below for a cross-browser solution) - (see "More Examples" below for a cross-browser solution) .
Syntaxe
element .addEventListener( event , function ,
useCapture )
Les valeurs des paramètres
| Paramètre | La description |
|---|---|
| event | Champs obligatoires. Une chaîne qui spécifie le nom de l'événement. Note: Ne pas utiliser le "on" préfixe. Par exemple, utiliser "click" au lieu de "onclick" . Pour une liste de tous les événements DOM HTML, consultez notre complet HTML DOM Référence objet d' événement . |
| function | Champs obligatoires. Indique la fonction à exécuter lorsque l'événement se produit. Lorsque l'événement se produit, un objet d'événement est transmis à la fonction en tant que premier paramètre. Le type de l'objet événement dépend de l'événement spécifié. Par exemple, le "click" événement appartient à l'objet MouseEvent. |
| useCapture | Optionnel. Une valeur booléenne qui indique si l'événement doit être exécuté dans la capture ou en phase de bulles. Valeurs possibles:
|
Détails techniques
| DOM Version: | DOM niveau 2 Events |
|---|---|
| Valeur de retour: | Aucune valeur de retour |
| changelog: | Le paramètre useCapture est devenu optionnel dans Firefox 6 et Opera 11,60 (has always been optional for Chrome, IE and Safari) en (has always been optional for Chrome, IE and Safari) Internet (has always been optional for Chrome, IE and Safari) |
autres exemples
Exemple
Vous pouvez également consulter un externe "named" fonction.
Cet exemple montre comment exécuter une fonction lorsqu'un utilisateur clique sur un <button> élément:
document.getElementById("myBtn").addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Essayez vous - même » Exemple
Vous pouvez ajouter de nombreux événements au même élément, sans écraser les événements existants.
Cet exemple montre comment ajouter deux événements de clic sur le même <button> élément:
document.getElementById("myBtn").addEventListener("click",
myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction); Essayez vous - même » Exemple
Vous pouvez ajouter des événements de différents types au même élément.
Cet exemple montre comment ajouter de nombreux événements sur le même <button> élément:
document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction); Essayez vous - même » Exemple
Lors du passage des valeurs de paramètres, utilisez une "anonymous function" qui appelle la fonction spécifiée avec les paramètres:
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
}); Essayez vous - même » Exemple
Changer la couleur de fond d'un <button> élément:
document.getElementById("myBtn").addEventListener("click", function(){
this.style.backgroundColor = "red";
}); Essayez vous - même » Exemple
En utilisant le paramètre optionnel useCapture pour démontrer la différence entre bouillonnement et la capture:
document.getElementById("myDiv").addEventListener("click", myFunction,
true); Essayez vous - même » Exemple
Utilisation de la removeEventListener() méthode pour supprimer un gestionnaire d'événement qui a été attaché avec le addEventListener() méthode:
// Attach an event handler to <div>
document.getElementById("myDIV").addEventListener("mousemove",
myFunction);
// Remove the event handler from <div>
document.getElementById("myDIV").removeEventListener("mousemove", myFunction); Essayez vous - même » Exemple
Pour les navigateurs qui ne prennent pas en charge la addEventListener() méthode, vous pouvez utiliser le attachEvent() méthode.
Cet exemple illustre une solution multi-navigateur:
var x = document.getElementById("myBtn");
if (x.addEventListener) {
// For all major browsers, except IE 8 and earlier
x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
// For IE 8 and earlier versions
x.attachEvent("onclick", myFunction);
} Essayez vous - même » Pages associées
JavaScript Tutoriel: HTML DOM EventListener
HTML DOM Référence: document. addEventListener()