Exemple
Joindre un événement de clic sur le document. Lorsque l'utilisateur clique ne importe où dans le document, la sortie "Hello World" tout le <p> "Hello World" dans un <p> élément avec id = « demo »:
document.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 document. addEventListener() document. addEventListener() méthode attache un gestionnaire d'événements au document.
Astuce: Utilisez le document. removeEventListener() Procédé pour supprimer un gestionnaire d'événement qui a été attaché avec le addEventListener() méthode.
Astuce: Utilisez l' élément. addEventListener() Procédé pour attacher un gestionnaire d'événement à un élément spécifié.
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
document.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:
document.addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Essayez vous - même » Exemple
Vous pouvez ajouter de nombreux événements au document, sans écraser les événements existants.
Cet exemple montre comment ajouter deux événements de clic sur le document:
document.addEventListener("click",
myFunction);
document.addEventListener("click", someOtherFunction); Essayez vous - même » Exemple
Vous pouvez ajouter des événements de différents types au document.
Cet exemple montre comment ajouter de nombreux événements au document:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.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.addEventListener("click", function() {
myFunction(p1, p2);
}); Essayez vous - même » Exemple
Changer la couleur d'arrière - plan du document <body> élément:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
}); 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 the document
document.addEventListener("mousemove",
myFunction);
// Remove the event handler from the document
document.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:
if (document.addEventListener) { // For all major browsers, except IE 8 and earlier
document.addEventListener("click", myFunction);
} else if (document.attachEvent) { // For IE 8 and earlier versions
document.attachEvent("onclick", myFunction);
} Essayez vous - même » Pages associées
JavaScript Tutoriel: HTML DOM EventListener
HTML DOM Référence: élément. addEventListener()