Metodo addEventListener() dell'oggetto Document DOM HTML

Definizione e uso

addEventListener() Il metodo aggiunge un gestore eventi al documento.

Esempio

Esempio 1

Aggiungi un evento click al documento:

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

Prova personalmente

Sintassi più semplice:

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

Prova personalmente

Esempio 2

Puoi aggiungere più ascoltatori degli eventi al documento:

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

Prova personalmente

Esempio 3

Puoi aggiungere diversi tipi di eventi:

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

Prova personalmente

Esempio 4

Quando si passano parametri, utilizzare una "funzione anonima" per chiamare la funzione con parametri:

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

Prova personalmente

Esempio 5

Cambiare il colore di sfondo del documento:

document.addEventListener("click", function(){
  document.body.style.backgroundColor = "red";
});

Prova personalmente

Esempio 6

Utilizzare il metodo removeEventListener():

// Aggiungere l'ascoltatore degli eventi
document.addEventListener("mousemove", myFunction);
// Rimuovere l'ascoltatore degli eventi
document.removeEventListener("mousemove", myFunction);

Prova personalmente

Sintassi

document.addEventListener(type, function, capture)

Parametri

Parametri Descrizione
type

Obbligatorio. Nome dell'evento.

Non utilizzare il prefisso "on".

Utilizzare "click" invece di "onclick".

Tutti gli eventi HTML DOM sono elencati in:

Manuale di riferimento degli oggetti eventi HTML DOM
function

Obbligatorio. Funzione eseguita quando si verifica un evento.

Quando si verifica un evento, l'oggetto evento viene passato come primo parametro alla funzione.

Il tipo dell'oggetto evento dipende dall'evento specificato. Ad esempio, l'evento "click" appartiene all'oggetto MouseEvent.
capture

Opzionale (predefinito = false).

  • true - L'esecuzione del gestore viene eseguita durante la fase di cattura
  • false - L'esecuzione del gestore viene eseguita durante la fase di bolle.

Valore di ritorno

Nessuno.

Dettagli tecnici

aggiunge la funzione di ascoltatore di eventi specificata alla raccolta di ascoltatori del nodo corrente per gestire gli eventi di tipo specificato type. Se capture Per true, l'ascoltatore viene registrato come ascoltatore di eventi di cattura. Se capture Per false, viene registrato come ascoltatore di eventi standard.

addEventListener() può essere chiamata più volte, è possibile registrare più gestori di eventi per lo stesso tipo di evento su uno stesso nodo. Tuttavia, DOM non può determinare l'ordine di chiamata dei vari gestori di eventi.

Se una funzione di ascoltatore di eventi viene registrata due volte nello stesso nodo con lo stesso type e capture il parametro viene registrato due volte, la seconda registrazione viene ignorata. Se si sta gestendo 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 Document, non si copiano gli ascoltatori di eventi registrati per il nodo originale.

Questo metodo è definito anche sugli oggetti Document e Window e funziona in modo simile.

Supporto dei browser

document.addEventListener È una caratteristica 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()

Corso

HTML DOM EventListener

Elenco completo degli eventi DOM