JavaScript utilise EventListener pour fonctionner sur les connaissances HTML DOM_Basic

Méthode addEventListener()
Exemple
L'événement d'écoute est déclenché lorsque l'utilisateur clique sur le bouton :

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

La méthode addEventListener() est utilisée pour ajouter un gestionnaire d'événements à l'élément spécifié.
Le gestionnaire d'événements ajouté par la méthode addEventListener() n'écrasera pas le gestionnaire d'événements existant.
Vous pouvez ajouter plusieurs gestionnaires d'événements à un élément.
Vous pouvez ajouter plusieurs gestionnaires d'événements du même type au même élément, comme deux événements « clic ».
Vous pouvez ajouter des écouteurs d'événements à n'importe quel objet DOM, pas seulement aux éléments HTML. Tel que : objet fenêtre.
La méthode addEventListener() facilite le contrôle des événements (bullage et capture).
Lorsque vous utilisez la méthode addEventListener(), le JavaScript est séparé du balisage HTML, ce qui le rend plus lisible, et vous pouvez ajouter des écouteurs d'événements sans contrôler le balisage HTML.
Vous pouvez utiliser la méthode removeEventListener() pour supprimer les écouteurs d'événements.
Grammaire

element.addEventListener(event, function, useCapture);

Le premier paramètre est le type d'événement (tel que "clic" ou "mousedown").
Le deuxième paramètre est la fonction appelée après le déclenchement de l'événement.
Le troisième paramètre est une valeur booléenne utilisée pour décrire si l'événement bouillonne ou capture. Ce paramètre est facultatif.
Remarque : N'utilisez pas le préfixe « on ». Par exemple, utilisez « clic » au lieu de « onclick ».

Ajouter un gestionnaire d'événements à l'élément d'origine
Exemple
"Hello World!" apparaît lorsque l'utilisateur clique sur l'élément :

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

Vous pouvez utiliser des noms de fonctions pour référencer des fonctions externes :
Exemple
"Hello World!" apparaît lorsque l'utilisateur clique sur l'élément :

element.addEventListener("click", myFunction);

function myFunction() {
 alert ("Hello World!");
}

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);

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);

Ajouter un gestionnaire d'événements à l'objet Window
La méthode addEventListener() vous permet d'ajouter des écouteurs d'événements aux objets HTML DOM tels que les éléments HTML, les documents HTML et les objets fenêtre. Ou d'autres objets d'événement de dépenses tels que : objet xmlHttpRequest.
Exemple
Ajoutez un écouteur d'événement lorsque l'utilisateur réinitialise la taille de la fenêtre :

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

Paramètres de réussite
Lors du passage des valeurs de paramètres, utilisez des « fonctions anonymes » pour appeler des fonctions avec des paramètres :
Exemple

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

Bouillonnement d'événement ou capture d'événement ?
Il existe deux manières de diffuser un événement : le bouillonnement et la capture.
La livraison d'événements définit l'ordre dans lequel les événements d'élément sont déclenchés. Si vous insérez un élément

dans un élément

et que l'utilisateur clique sur l'élément

, quel événement « clic » de l'élément sera déclenché en premier ?
En bullage, l'événement de l'élément interne sera déclenché en premier, puis celui de l'élément externe, c'est-à-dire : l'événement click de l'élément

sera déclenché en premier, puis l'événement click de l'élément

sera déclenché.
En capture, l'événement de l'élément externe sera déclenché en premier, puis l'événement de l'élément interne sera déclenché, c'est-à-dire : l'événement click de l'élément

sera déclenché en premier, puis l'événement click de l'élément

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

addEventListener(event, function, useCapture);

La valeur par défaut est false, ce qui signifie une diffusion par bulle. Lorsque la valeur est vraie, l'événement est diffusé à l'aide de la capture.
Exemple
document.getElementById("myDiv").addEventListener("click", myFunction, true);

Essayez-le »

Méthode RemoveEventListener()
La méthode removeEventListener() supprime le gestionnaire d'événements ajouté par la méthode addEventListener() :
Exemple

element.removeEventListener("mousemove", myFunction);

Prise en charge du navigateur
Les nombres dans le tableau représentent le numéro de version du premier navigateur prenant en charge cette méthode.

Remarque : IE 8 et versions antérieures d'IE, Opera 7.0 et versions antérieures ne prennent pas en charge les méthodes addEventListener() et removeEventListener(). Cependant, pour ces versions de navigateur, le gestionnaire d'événements peut être supprimé à l'aide de la méthode detachEvent() :

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

Exemple
Solution de contournement multi-navigateurs :

var x = document.getElementById("myBtn");
if (x.addEventListener) {     // 所有主流浏览器，除了 IE 8 及更早版本
 x.addEventListener("click", myFunction);
} else if (x.attachEvent) {     // IE 8 及更早版本
 x.attachEvent("onclick", myFunction);