Écouteur d'événements JavaScript HTML DOM
La méthode addEventListener()
Exemple
Ajoutez un écouteur d'événement qui se déclenche lorsqu'un utilisateur clique sur un bouton :
document.getElementById("myBtn").addEventListener("click", displayDate);
La addEventListener()méthode attache un gestionnaire d'événements à l'élément spécifié.
La addEventListener()méthode attache un gestionnaire d'événements à un élément sans écraser les gestionnaires d'événements existants.
Vous pouvez ajouter plusieurs gestionnaires d'événements à un élément.
Vous pouvez ajouter plusieurs gestionnaires d'événements du même type à un élément, c'est-à-dire deux événements "clic".
Vous pouvez ajouter des écouteurs d'événements à n'importe quel objet DOM, pas seulement aux éléments HTML. c'est-à-dire l'objet fenêtre.
La addEventListener()méthode facilite le contrôle de la réaction de l'événement au bouillonnement.
Lors de l'utilisation de 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 la removeEventListener()méthode.
Syntaxe
element.addEventListener(event, function, useCapture);
Le premier paramètre est le type de l'événement (comme " click" ou " mousedown" ou tout autre événement HTML DOM .)
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 spécifiant s'il faut utiliser le bouillonnement d'événements ou la capture d'événements. Ce paramètre est facultatif.
Notez que vous n'utilisez pas le préfixe "on" pour l'événement ; utilisez " click" au lieu de " onclick".
Ajouter un gestionnaire d'événements à un élément
Exemple
Alerte "Hello World!" lorsque l'utilisateur clique sur un élément :
element.addEventListener("click", function(){ alert("Hello World!"); });
Vous pouvez également faire référence à une fonction "nommée" externe :
Exemple
Alerte "Hello World!" lorsque l'utilisateur clique sur un élément :
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
Ajouter plusieurs gestionnaires d'événements au même élément
La 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);
Vous pouvez ajouter des événements de différents types au même élément :
Exemple
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
Ajouter un gestionnaire d'événements à l'objet window
La addEventListener()méthode vous permet d'ajouter des écouteurs d'événement sur n'importe quel objet HTML DOM tel que des éléments HTML, le document HTML, l'objet window ou d'autres objets qui prennent en charge les événements, comme l' xmlHttpRequestobjet .
Exemple
Ajoutez 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;
});
Paramètres de passage
Lorsque vous transmettez des valeurs de paramètre, utilisez une "fonction anonyme" qui appelle la fonction spécifiée avec les paramètres :
Exemple
element.addEventListener("click", function(){ myFunction(p1, p2); });
Bullage d'événements ou capture d'événements ?
Il existe deux manières de propager les événements dans le DOM HTML, le bouillonnement et la capture.
La propagation des événements est un moyen de définir l'ordre des éléments lorsqu'un événement se produit. Si vous avez un élément <p> à l'intérieur d'un élément <div> et que l'utilisateur clique sur l'élément <p>, quel événement "click" de l'élément doit être géré en premier ?
Dans le bouillonnement , l'événement de l'élément le plus interne est géré en premier, puis l'événement externe : l'événement click de l'élément <p> est géré en premier, puis l'événement click de l'élément <div>.
Lors de la capture , l'événement de l'élément le plus externe est traité en premier, puis l'événement interne : l'événement click de l'élément <div> sera traité en premier, puis l'événement click de l'élément <p>.
Avec la méthode addEventListener() vous pouvez spécifier le type de propagation en utilisant le paramètre "useCapture":
addEventListener(event, function, useCapture);
La valeur par défaut est false, qui utilisera la propagation par bulles, lorsque la valeur est définie sur true, l'événement utilise la propagation par capture.
Exemple
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
La méthode removeEventListener()
La removeEventListener()méthode supprime les gestionnaires d'événements qui ont été attachés avec la méthode addEventListener() :
Exemple
element.removeEventListener("mousemove", myFunction);
Référence d'objet d'événement HTML DOM
Pour une liste de tous les événements HTML DOM, consultez notre référence complète sur les objets d'événement HTML DOM .