Programme d'écoute d'événements HTML DOM JavaScript

Méthode addEventListener()

Exemple

Ajoutez un gestionnaire d'événement qui déclenche lorsque l'utilisateur clique sur le bouton :

document.getElementById("myBtn").addEventListener("click", displayDate);

Essayez-le vous-même

addEventListener() La méthode attribue un gestionnaire d'événement spécifique à un élément.

addEventListener() La méthode ajoute un gestionnaire d'événement à un élément sans le remplacer.

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, par exemple deux événements "click".

Vous pouvez ajouter des gestionnaires d'événements à n'importe quel objet DOM, pas seulement aux éléments HTML, par exemple à l'objet window.

addEventListener() La méthode nous permet de contrôler plus facilement la manière dont les événements réagissent à la propagation.

Lorsque vous utilisez addEventListener() La méthode, JavaScript et les balises HTML sont séparés pour une meilleure lisibilité ; même sans contrôler les balises HTML, vous pouvez ajouter des gestionnaires d'événements.

Vous pouvez utiliser removeEventListener() La méthode permet de supprimer facilement un gestionnaire d'événement.

Syntaxe

element.addEventListener(event, function, useCapture);

Le premier paramètre est le type de l'événement (par exemple "click" ou "mousedown").

Le deuxième paramètre est la fonction à appeler lorsque l'événement se produit.

Le troisième paramètre est une valeur booléenne qui spécifie si l'événement doit être propagé ou capturé. Ce paramètre est optionnel.

Attention :Ne pas utiliser le préfixe "on" pour les événements ; utilisez "click" à la place de "onclick".

Ajouter un gestionnaire d'événement à un élément

Exemple

Afficher "Hello World!" lorsque l'utilisateur clique sur un élément :

element.addEventListener("click", function(){ alert("Hello World!"); });

Essayez-le vous-même

Vous pouvez également appeler une fonction "nommée" externe :

Exemple

Afficher "Hello World!" lorsque l'utilisateur clique sur un élément :

element.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

Essayez-le vous-même

Ajouter plusieurs gestionnaires d'événements au même élément

addEventListener() La méthode permet d'ajouter plusieurs événements au même élément sans les couvrir :

Exemple

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

Essayez-le vous-même

Vous pouvez ajouter différents types d'événements 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 au objet Window

addEventListener() Permet de lier un gestionnaire d'événement à n'importe quel objet HTML DOM, comme un élément HTML, un objet HTML, l'objet window ou tout autre objet supportant les événements, comme l'objet XMLHttpRequest.

Exemple

Ajouter un gestionnaire d'événement qui est déclenché lorsque l'utilisateur ajuste la taille de la fenêtre :

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

Essayez-le vous-même

Passer des paramètres

Lorsque vous passez des valeurs de paramètres, utilisez une fonction anonyme en tant que paramètre pour appeler la fonction spécifiée :

Exemple

element.addEventListener("click", function(){ myFunction(p1, p2); });

Essayez-le vous-même

Propagation par bulle ou capture d'événement ?

Dans l'HTML DOM, il y a deux méthodes de propagation des événements : la bulle et la capture.

La propagation des événements est une méthode pour définir l'ordre des éléments lorsque se produit un événement. Si <div> contient un <p>, et l'utilisateur clique sur l'élément <p>, quel événement "click" doit être traité en premier ?

Dans la phase de bulle, l'élément le plus interne est traité en premier, puis les éléments plus externes : d'abord traiter l'événement de clic de l'élément <p>, puis l'événement de clic de l'élément <div>.

Dans la phase de capture, l'élément le plus externe est traité en premier, puis les éléments plus internes : d'abord traiter l'événement de clic de l'élément <div>, puis l'événement de clic de l'élément <p>.

Dans la méthode addEventListener(), vous pouvez définir le type de propagation en utilisant le paramètre "useCapture" :

addEventListener(event, function, useCapture);

la valeur par défaut est falsel'événement est propagé par bulle. Si cette valeur est définie sur truesi ce paramètre est mis à

Exemple

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

Essayez-le vous-même

par la méthode removeEventListener()

removeEventListener() La méthode supprime les gestionnaires d'événements qui ont été addEventListener() Programmeur d'événements attaché à la méthode :

Exemple

element.removeEventListener("mousemove", myFunction);

Essayez-le vous-même

Support du navigateur

Les nombres dans le tableau indiquent la première version de navigateur qui prend en charge ces méthodes pleinement.

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 :IE 8, Opera 6.0 et les versions antérieures ne prennent pas en charge addEventListener() et removeEventListener() Méthode. Cependant, pour ces versions spéciales de navigateurs, vous pouvez utiliser attachEvent()} Méthode d'ajout de gestionnaires d'événements à l'élément, et de detachEvent() Méthode de suppression :

element.attachEvent(event, function);
element.detachEvent(event, function);

Exemple

Solution de navigation croisée :

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // Pour les navigateurs populaires, à l'exception d'IE 8 et versions antérieures
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // Pour IE 8 et versions antérieures
    x.attachEvent("onclick", myFunction);
}

Essayez-le vous-même

Manuel de référence de l'objet événement DOM HTML

Pour obtenir une liste complète des événements DOM HTML, veuillez visiter notre site complet Manuel de référence de l'objet événement DOM HTML.