Ascoltatori di eventi JavaScript

L'ultima funzionalità dei gestori degli eventi JavaScript è l'ascoltatore degli eventi. L'ascoltatore degli eventi sorveglia gli eventi sugli elementi.

UtilizzeremoaddEventListener()per sostituire l'attribuzione diretta degli eventi all'elemento.

Il metodo addEventListener()

addEventListener()Il metodo aggiunge il gestore degli eventi all'elemento specificato.

Possiamo riscrivere l'esempio di colore casuale (dal capitolo precedente), come segue:

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

Ancora, usiamo conprimastessobgChange()Funzione. UtilizzeremoaddEventListener()Il metodo aggiunge l'evento al pulsante.

addEventListener() Accetta due parametri obbligatori - l'evento da ascoltare e la funzione callback del listener.

Questo metodo è simile all'attributo gestore degli eventi (capitolo precedente), ma la sintassi è chiaramente diversa.

Sintassi:

element.addEventListener(event, listener, useCapture)

Il primo parametro è il tipo dell'evento (ad esempio “click” o “mousemove”).

Il secondo parametro è la funzione di ascoltatore che chiamiamo quando si verifica l'evento.

Il terzo parametro è un valore booleano che specifica se utilizzare il bubble o il capture degli eventi. Questo parametro è opzionale.

Aggiungi l'ascoltatore degli eventi all'elemento

Attenzione, metti tutto il codice dentroaddEventListener()È molto adatto nell'ambito di una funzione anonima, come illustrato di seguito:

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

Puoi anche richiamare funzioni "denominate" esterne:

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

Aggiungere più istanze di ascoltatore di eventi allo stesso elemento

All'inizio, l'ascoltatore di eventi sembra molto simile alle proprietà del gestore degli eventi, ma hanno alcuni vantaggi. Possiamo impostare più istanze di ascoltatore di eventi sullo stesso elemento, come nell'esempio seguente:

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

Aggiungere più istanze di ascoltatore di eventi allo stesso elemento

Possiamo aggiungere diversi tipi di eventi agli elementi:
document.querySelector("button").addEventListener("mouseenter", myFunc1);
document.querySelector("button").addEventListener("click", myFunc2);

document.querySelector("button").addEventListener("mouseout", myFunc3);

Passare i parametri

Quando si passano valori di parametri, utilizzare una funzione anonima che utilizza i parametri per chiamare la funzione specificata:
var btn = document.querySelector("button");
btn.addEventListener("click", function() {
});

myFunc(x, y);

aggiungere un'istanza di ascoltatore di eventi al Oggetto WindowaddEventListener()inoltre, puoiDocumentoeFinestrasul quale viene utilizzato.

In questo esempio viene utilizzato il seguenteaddEventListener()Il metodo aggiunge l'evento click al documento:

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

In questo esempio viene utilizzato iladdEventListener()Il metodo aggiunge l'evento di ridimensionamento (resize) alla finestra:

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

Al momento, l'ascolto degli eventi è il modo più comune e preferito per gestire gli eventi in JavaScript.

metodo removeEventListener()

Puoi anche usare ilremoveEventListener()Il metodo rimuove uno o tutti gli eventi da un elemento.

var box = document.getElementById("para");
// Aggiungi un handler dell'evento a un elemento P con id="para"
box.addEventListener("mousemove", myFunc);
// Rimuovi l'handler dell'evento da un elemento P con id="para"
box.removeEventListener("mousemove", myFunc);

Il primo parametro è il tipo dell'evento (ad esempio “click” o “mousemove”).

Il secondo parametro è la funzione che chiamiamo quando si verifica l'evento.

Più letture

Riferimento JavaScript:Riferimento oggetto evento HTML DOM