Metodo addEventListener() del DOM HTML

Definizione e uso

addEventListener() Il metodo aggiunge un gestore di eventi all'elemento.

Esempio

Esempio 1

Aggiungi l'evento click all'elemento <button>:

element.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

Prova tu stesso

Esempio 2

Codice più compatto:

element.addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});

Prova tu stesso

Puoi trovare più esempi nella pagina in basso.

Sintassi

element.addEventListener(type, function, useCapture)

Parametri

Parametri Descrizione
type

Obbligatorio. Il nome dell'evento.

Non usare il prefisso "on".

Usa "click" invece di "onclick".


Elenco completo degli eventi DOM
function Obbligatorio. La funzione che viene eseguita quando l'evento si verifica.
useCapture

Opzionale (default = false).

  • false - L'esecuzione del gestore avviene nella fase di bollettazione.
  • true - L'esecuzione del gestore avviene nella fase di cattura.

Valore di ritorno

Nessuno.

Dettagli tecnici

Questo metodo aggiunge la funzione di ascoltatore di eventi specificata alla raccolta di ascoltatori di eventi corrente del nodo, per gestire il tipo di evento specificato. type degli eventi. useCapture Per true, l'ascoltatore viene registrato come ascoltatore di eventi di cattura. Se useCapture Per false, viene registrato come ascoltatore di eventi normale.

addEventListener() può essere chiamata più volte, registrando più gestori di eventi dello stesso tipo sullo stesso nodo. Tuttavia, il DOM non può determinare l'ordine di chiamata dei vari gestori di eventi.

Se una funzione di ascoltatore di eventi viene utilizzata con lo stesso type E useCapture Se il parametro viene registrato due volte, la seconda registrazione viene ignorata. Se si sta elaborando un evento su un nodo e si registra un nuovo ascoltatore di eventi su quel nodo, non verrà chiamato il nuovo ascoltatore di eventi per quell'evento.

Quando si Node.cloneNode() Metodo o Document.importNode() Quando si copia un nodo Documento, non si copiano gli ascoltatori di eventi registrati sul nodo originale.

Questo metodo è anche Document E Window Definiti sull'oggetto e funzionano in modo simile.

Più esempi

Esempio 3

Puoi aggiungere molti eventi allo stesso elemento:

element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);

Prova tu stesso

Esempio 4

Puoi aggiungere diversi eventi allo stesso elemento:

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);

Prova tu stesso

Esempio 5

Per passare valori di parametri, utilizzare "funzione anonima":

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

Prova tu stesso

Esempio 6

Cambia il colore di sfondo dell'elemento <button>:

element.addEventListener("click", function() {
  this.style.backgroundColor = "red";
});

Prova tu stesso

Esempio 7

Differenze tra bubbling e capturing:

element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);

Prova tu stesso

Esempio 8

Elimina il gestore degli eventi:

element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);

Prova tu stesso

Supporto del browser

element.addEventListener() È una funzione di DOM Level 2 (2001).

Tutti i browser lo supportano completamente:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Supporto 9-11 Supporto Supporto Supporto Supporto

Pagine correlate

Metodi degli elementi:

Metodo addEventListener()

Metodo removeEventListener()

Metodi del documento:

Metodo addEventListener()

Metodo removeEventListener()

Guida:

HTML DOM EventListener

Elenco completo degli eventi DOM