Écouteur d'événements JavaScript

La dernière fonctionnalité des gestionnaires d'événements JavaScript est l'écouteur d'événement. L'écouteur d'événement surveille les événements sur les éléments.

Nous allons utiliseraddEventListener()à utiliser à la place de l'affectation directe des événements à des attributs de l'élément.

méthode addEventListener()

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

Nous pouvons réécrire l'exemple de couleur aléatoire (du chapitre précédent), comme suit :

document.querySelector("button").addEventListener("click", bgChange);
function bgChange() {
　　　let color = "rgb("　+　random(255)　+　",　+　random(255)　+　",　+　random(255)　+　)");
　　　document.body.style.backgroundColor = color;
}

Nous utilisons toujours avecavantidentiquebgChange()La fonction. Nous allonsaddEventListener()La méthode est attachée au bouton.

addEventListener() Accepte deux paramètres obligatoires-Les événements à surveiller et les fonctions de rappel des gestionnaires.

Cette méthode est similaire à la propriété gestionnaire d'événement (chapitre précédent), mais la syntaxe est évidemment différente.

Syntaxe :

element.addEventListener(event, listener, useCapture)

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

Le deuxième paramètre est la fonction d'écouteur appelée lors de l'événement.

Le troisième paramètre est une valeur booléenne, indiquant si l'utilisation de l'événement bubble ou de l'événement capture. Ce paramètre est optionnel.

Ajoutez l'écouteur d'événement à l'élément

Veuillez noter que mettez tout le code dansaddEventListener()Il est très approprié dans une fonction anonyme dans une méthode, comme indiqué ci-dessous :

let para = document.querySelector("#para");
para.addEventListener("click", function() {
this.innerHTML = "Hello world";
});

Vous pouvez également appeler des fonctions "nommées" externes :

let para = document.querySelector("#para");
para.addEventListener("click", changeText);
function changeText() {
　　　para.innerHTML = "Hello world";
}

Ajoutez plusieurs écouteurs d'événements au même élément

À première vue, l'écouteur d'événement semble très similaire aux attributs gestionnaires d'événements, mais ils ont certains avantages. Nous pouvons configurer plusieurs écouteurs d'événements sur le même élément, comme dans l'exemple suivant :

document.querySelector("button").addEventListener("click", myFunc);
document.querySelector("button").addEventListener("click", anotherFunc);

Nous pouvons ajouter différents types d'événements aux éléments :

document.querySelector("button").addEventListener("mouseenter", myFunc1);
document.querySelector("button").addEventListener("click", myFunc2);
document.querySelector("button").addEventListener("mouseout", myFunc3);

Transmettez les paramètres

Lorsque vous transmettez des valeurs de paramètres, utilisez une fonction anonyme qui appelle la fonction spécifiée en utilisant les paramètres :

var btn = document.querySelector("button");
btn.addEventListener("click", function() {
myFunc(x, y);
});

ajouter un écouteur d'événement à l'objet Window

De plus, vous pouvezaddEventListener()dansDocumentetFenêtreobjets.

Dans cet exemple, nous utilisons lesaddEventListener()La méthode ajoute l'événement click au document :

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

Dans cet exemple, nous utilisons cetteaddEventListener()La méthode ajoute l'événement de redimensionnement (resize) à la fenêtre :

window.addEventListener("resize", function() {
box.innerHTML = Math.random();
});

Actuellement, l'écoute d'événement est la méthode la plus courante et la plus préférée pour traiter les événements en JavaScript.

la méthode removeEventListener()

Vous pouvez également utiliserremoveEventListener()La méthode supprime un ou tous les événements d'un élément.

var box = document.getElementById("para");
//　Attacher un gestionnaire d'événement à un élément P avec l'id="para"
box.addEventListener("mousemove", myFunc);
//　Retirer le gestionnaire d'événement d'un élément P avec l'id="para"
box.removeEventListener("mousemove", myFunc);

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

Le second paramètre est la fonction à appeler lors de l'événement.

Plus de lectures

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