JavaScript HTML DOM EventListener

Méthode addEventListener()

Exemple

Déclencher un événement d'écoute lorsque l'utilisateur clique sur le bouton :

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

Essayez-le vous-même »

La méthode addEventListener() est utilisée pour ajouter un gestionnaire d'événements à un élément spécifié.

Les gestionnaires d'événements ajoutés avec la méthode addEventListener() n'écrasent pas les gestionnaires d'événements existants.

Vous pouvez ajouter plusieurs gestionnaires d'événements à un même élément.

Vous pouvez ajouter plusieurs gestionnaires d'événements du même type au même élément, comme deux événements "click".

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

La méthode addEventListener() facilite le contrôle des événements (bouillonnement vs capture).

Lorsque vous utilisez la méthode addEventListener(), JavaScript est séparé du balisage HTML pour une meilleure lisibilité, et vous pouvez ajouter des écouteurs d'événements même lorsque vous ne contrôlez pas le balisage HTML.

Vous pouvez utiliser la méthode removeEventListener() pour supprimer des écouteurs d'événements.

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 à appeler lorsque l'événement est déclenché.

Le troisième paramètre est une valeur booléenne qui décrit si l'événement est en bouillonnement ou en capture. Ce paramètre est facultatif.

Note Remarque : N'utilisez pas le préfixe "on". Par exemple, utilisez "click" au lieu de "onclick".

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

Exemple

Affichez une alerte "Hello World!" lorsque l'utilisateur clique sur un élément :

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

Essayez-le vous-même »

Vous pouvez référencer une fonction externe en utilisant son nom de fonction :

Exemple

Affichez une alerte "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

La méthode addEventListener() permet d'ajouter plusieurs é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 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énements à l'objet window

La méthode addEventListener() vous permet d'ajouter des écouteurs d'événements à des objets du DOM HTML, tels que les éléments HTML, les documents HTML et l'objet window. Ou d'autres objets d'événement pris en charge comme l'objet xmlHttpRequest.

Exemple

Ajouter un écouteur d'événement lorsque l'utilisateur redimensionne la fenêtre :

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

Essayez-le vous-même »

Passage de paramètres

Lorsque vous passez des valeurs de paramètres, utilisez une "fonction anonyme" pour appeler une fonction avec des paramètres :

Exemple

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

Essayez-le vous-même »

Bouillonnement d'événements ou capture d'événements ?

Il existe deux modes de propagation des événements : le bouillonnement et la capture.

La propagation d'événements définit l'ordre dans lequel les événements des éléments sont déclenchés. Si vous insérez un élément <p> à l'intérieur d'un élément <div>, et que l'utilisateur clique sur l'élément <p>, l'événement "click" de quel élément est déclenché en premier ?

EnBouillonnementEn bouillonnement, l'événement de l'élément interne est déclenché en premier, puis l'événement de l'élément externe est déclenché. C'est-à-dire : l'événement click de l'élément <p> est déclenché en premier, puis l'événement click de l'élément <div>.

EnCaptureEn capture, l'événement de l'élément externe est déclenché en premier, puis l'événement de l'élément interne est déclenché. C'est-à-dire : l'événement click de l'élément <div> est déclenché en premier, puis l'événement click de l'élément <p>.

La méthode addEventListener() peut spécifier le paramètre "useCapture" pour définir le type de propagation :

addEventListener(event, function, useCapture);

La valeur par défaut est false, ce qui signifie une propagation par bouillonnement. Lorsque la valeur est true, l'événement utilise une propagation par capture.

Exemple

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

Essayez-le vous-même »

Méthode removeEventListener()

La méthode removeEventListener() supprime les gestionnaires d'événements ajoutés par la méthode addEventListener() :

Exemple

element.removeEventListener("mousemove", myFunction);

Essayez-le vous-même »

Prise en charge des navigateurs

Les nombres dans le tableau spécifient la première version de navigateur qui prend entièrement en charge la méthode.

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 et les versions IE antérieures, ainsi qu'Opera 7.0 et les versions antérieures, ne prennent pas en charge les méthodes addEventListener() et removeEventListener(). Toutefois, pour ces versions de navigateur, vous pouvez utiliser la méthode detachEvent() pour supprimer les gestionnaires d'événements :

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

Exemple

Solution multi-navigateurs :

var x = document.getElementById("myBtn");
if (x.addEventListener) { // Tous les principaux navigateurs, sauf IE 8 et versions antérieures
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 et versions antérieures
    x.attachEvent("onclick", myFunction);
}

Essayez-le vous-même »

Référence de l'objet événement HTML DOM

Pour tous les événements HTML DOM, vous pouvez consulter notreréférence complète de l'objet événement HTML DOM。 Autres extensions