Écouteur d’événements JavaScript 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);
Essayez-le vous-même »
Le addEventListener() La méthode attache un gestionnaire d’événements à l’élément spécifié.
Le addEventListener() La 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.
Le addEventListener() permet de contrôler plus facilement la réaction de l’événement au bouillonnement.
Lors de l’utilisation du addEventListener() le JavaScript est séparé du balisage HTML, pour une meilleure lisibilité et vous permet d’ajouter des écouteurs d’événements 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
élément.addEventListener(événement, fonction, 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 ; utiliser « 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 :
élément.addEventListener(« click », function(){ alert(« Hello World! »); });
Essayez-le vous-même »
Vous pouvez également faire référence à une fonction « nommée » externe :
Exemple
Alerte « Hello World! » lorsque l’utilisateur clique sur un élément :
élément.addEventListener(« clic », maFonction);
function maFonction() {
alerte (« Hello World! »);
}
Essayez-le vous-même »
Ajouter plusieurs gestionnaires d’événements au même élément
Le addEventListener() permet d’ajouter de nombreux événements au même élément, sans écraser les événements existants :
Exemple
élément.addEventListener(« clic », maFonction);
élément.addEventListener(« click », mySecondFunction);
Essayez-le vous-même »
Vous pouvez ajouter des événements de différents types au même élément :
Exemple
élément.addEventListener(« mouseover », myFunction);
élément.addEventListener(« click », mySecondFunction);
élément.addEventListener(« mouseout », maThirdFunction);
Essayez-le vous-même »
Ajouter un gestionnaire d’événements à l’objet window
Le addEventListener() vous permet d’ajouter des écouteurs d’événements sur n’importe quel objet HTML DOM tel que les éléments HTML, le document HTML, l’objet fenêtre ou d’autres objets qui prennent en charge les événements, comme le xmlHttpRequest objet.
Exemple
Ajoutez un écouteur d’événement qui se déclenche lorsqu’un utilisateur redimensionne la fenêtre :
window.addEventListener(« redimensionner », fonction(){
document.getElementById(« démo »).innerHTML = Du texte;
});
Essayez-le vous-même »
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
élément.addEventListener(« click », function(){ myFunction(p1, p2); });
Essayez-le vous-même »
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
à l’intérieur d’un élément
, quel événement « click » de l’élément doit être géré en premier ?
Dans bouillonnant l’événement de l’élément le plus à l’intérieur est géré en premier, puis l’événement à l’extérieur : l’événement click de l’élément
est géré en premier, puis l’événement click de l’élément
Dans capturer l’événement de l’élément le plus externe est géré en premier, puis l’événement interne : l’événement click de l’élément
.
Avec la méthode addEventListener() vous pouvez spécifier le type de propagation en utilisant le paramètre « useCapture »:
addEventListener(événement, fonction, utiliserCapture);
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);
Essayez-le vous-même »
La méthode removeEventListener()
Le removeEventListener() supprime les gestionnaires d’événements qui ont été attachés avec la méthode addEventListener() :
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.
#Écouteur #dévénements #JavaScript #DOM