Le addEventListener() méthode
Exemple
Ajouter un écouteur d'événement qui se déclenche quand un utilisateur clique sur un bouton:
document.getElementById("myBtn").addEventListener("click", displayDate); Essayez - le vous - même » Le addEventListener() méthode attache un gestionnaire d'événement à l'élément spécifié.
Le addEventListener() méthode attache un gestionnaire d'événements à un élément sans écraser les gestionnaires d'événements existants.
Vous pouvez ajouter de nombreux gestionnaires d'événements à un seul élément.
Vous pouvez ajouter de nombreux gestionnaires d'événements du même type à un élément, soit deux "click" événements.
Vous pouvez ajouter des écouteurs d'événement à un objet non DOM des éléments HTML seulement. à savoir l'objet de la fenêtre.
Le addEventListener() méthode permet de mieux contrôler la façon dont l'événement réagit à un barbotage.
Lorsque vous utilisez la addEventListener() méthode, le JavaScript est séparé du balisage HTML, pour une meilleure lisibilité et vous permet d'ajouter des écouteurs d'événement , même lorsque vous ne contrôlez pas le balisage HTML.
Vous pouvez facilement supprimer un écouteur d'événement en utilisant le removeEventListener() méthode.
Syntaxe
element .addEventListener( event, function, useCapture );Le premier paramètre est le type de l'événement (comme "click" ou "mousedown" ).
Le deuxième paramètre est la fonction que nous voulons appeler lorsque l'événement se produit.
Le troisième paramètre est une valeur booléenne indiquant si vous souhaitez utiliser bullage d'événement ou d'un événement de capture. Ce paramètre est facultatif.
Notez que vous ne pas utiliser le "on" préfixe pour l'événement; utiliser "click" au lieu de "onclick" .
Ajouter un gestionnaire d'événements à un élément
Exemple
Alerte "Bonjour tout le monde!" lorsque l'utilisateur clique sur un élément:
element .addEventListener("click", function(){ alert("Hello World!"); }); Essayez - le vous - même » Vous pouvez également consulter une fonction externe "nommé":
Exemple
Alerte "Bonjour tout le monde!" lorsque l'utilisateur clique sur un élément:
element .addEventListener("click",
myFunction);
function myFunction() {
alert ("Hello World!");
} Essayez - le vous - même » Ajouter Beaucoup de gestionnaires d'événements au même élément
Le addEventListener() méthode vous permet d'ajouter de nombreux événements au même élément, sans écraser les événements existants:
Exemple
element .addEventListener("click", myFunction);
element .addEventListener("click", mySecondFunction);
Essayez - le vous - même » Vous pouvez ajouter des événements de types différents au même élément:
Exemple
element .addEventListener("mouseover", myFunction);
element .addEventListener("click", mySecondFunction);
element .addEventListener("mouseout", myThirdFunction); Essayez - le vous - même » Ajouter un gestionnaire d'événement à l'objet Window
Le addEventListener() méthode vous permet d'ajouter des écouteurs d'événement sur un objet DOM HTML tels que des éléments HTML, le document HTML, l'objet de la fenêtre, ou d' autres objets qui prennent en charge les événements, comme le xmlHttpRequest objet.
Exemple
Ajouter un écouteur d'événement qui se déclenche lorsqu'un utilisateur redimensionne la fenêtre:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext ;
});
Essayez - le vous - même » passage de paramètres
Lors du passage des valeurs de paramètres, utiliser une "fonction anonyme" qui appelle la fonction spécifiée avec les paramètres:
Exemple
element .addEventListener("click", function(){ myFunction(p1, p2); });
Essayez - le vous - même » Bubbling événement ou Capture d'événement?
Il y a deux façons de propagation de l'événement dans le DOM HTML, bouillonnantes et capture.
la propagation de l'événement est une façon de définir l'ordre des éléments lorsqu'un événement se produit. Si vous avez un <p> élément dans un <div> élément, et l'utilisateur clique sur le <p> élément, de l' élément "click" l' événement doit être manipulé en premier?
En barbotage , l'événement le plus élément intérieur est traité en premier, puis l'extérieur: le <p> événement click de l' élément est traité en premier, puis le <div> événement click de l' élément.
En capturant l'événement le plus élément extérieur est traité en premier, puis l'intérieur: le <div> cliquez sur l'événement élément sera traité en premier, puis le <p> événement click de l' élément.
Avec le addEventListener() méthode , vous pouvez spécifier le type de propagation en utilisant le "useCapture" paramètre:
addEventListener( event , function , useCapture );La valeur par défaut est false, qui utilisera la propagation des bulles, lorsque la valeur est définie sur true, l'événement utilise la propagation de capture.
Exemple
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
Essayez - le vous - même » Le removeEventListener() méthode
Le removeEventListener() méthode supprime les gestionnaires d'événements qui ont été attachés à la addEventListener() méthode:
support du navigateur
Les chiffres dans le tableau indique la première version du navigateur qui soutient pleinement ces méthodes.
| méthode | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
| removeEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
Remarque: Le addEventListener() et removeEventListener() méthodes ne sont pas pris en charge dans IE 8 et les versions antérieures et Opera 6.0 et les versions antérieures. Cependant, pour ces versions spécifiques du navigateur, vous pouvez utiliser le attachEvent() méthode pour joindre un gestionnaire d'événements à l'élément et le detachEvent() méthode pour le supprimer:
element. attachEvent (event, function);
element. detachEvent (event,
function); Exemple
solution Cross-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 - le vous - même » HTML DOM Event Object Reference
Pour une liste de tous les événements HTML DOM, consultez notre complète HTML DOM Event Object Reference .