Programmi di ascolto eventi HTML DOM JavaScript

Metodo addEventListener()

Esempio

Aggiungi un listener di evento che viene attivato quando l'utente clicca sul pulsante:

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

Prova tu stesso

addEventListener() Il metodo assegna un gestore di eventi specifico a un elemento.

addEventListener() Il metodo aggiunge un gestore di eventi all'elemento senza sovrascrivere quelli esistenti.

Puoi aggiungere più gestori di eventi a un elemento.

Puoi aggiungere più gestori di eventi dello stesso tipo a un elemento, ad esempio due eventi "click".

Puoi aggiungere gestori di eventi a qualsiasi oggetto DOM, non solo agli elementi HTML, ad esempio all'oggetto window.

addEventListener() Il metodo ci permette di controllare più facilmente come l'evento risponde al bubbling.

Quando si utilizza addEventListener() Il metodo separa JavaScript e markup HTML, migliorando la leggibilità; anche quando non si controlla il markup HTML, ti permette di aggiungere ascoltatori di eventi.

Puoi usare removeEventListener() Il metodo elimina facilmente gli ascoltatori di eventi.

Sintassi

elemento.addEventListener(evento, funzione, useCapture);

Il primo parametro è il tipo di evento (ad esempio "click" o "mousedown").

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

Il terzo parametro è un valore booleano che specifica se utilizzare il bubbling degli eventi o la capturing. Questo parametro è opzionale.

Attenzione:Non utilizzare il prefisso "on" per gli eventi; usa "click" al posto di "onclick".

Aggiungi un gestore di eventi all'elemento

Esempio

Mostra "Hello World!" quando l'utente clicca su un elemento:

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

Prova tu stesso

Puoi anche referenziare una funzione "nomata" esterna:

Esempio

Mostra "Hello World!" quando l'utente clicca su un elemento:

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

Prova tu stesso

Aggiungi più gestori di eventi allo stesso elemento

addEventListener() Il metodo ti permette di aggiungere più eventi allo stesso elemento senza sovrascrivere quelli esistenti:

Esempio

elemento.addEventListener("click", myFunction);
elemento.addEventListener("click", mySecondFunction);

Prova tu stesso

Puoi aggiungere diversi tipi di eventi allo stesso elemento:

Esempio

elemento.addEventListener("mouseover", myFunction);
elemento.addEventListener("click", mySecondFunction);
elemento.addEventListener("mouseout", myThirdFunction);

Prova tu stesso

Aggiungi un gestore di eventi al Oggetto Window

addEventListener() Ti permette di aggiungere un ascoltatore di eventi a qualsiasi oggetto HTML DOM, come un elemento HTML, un oggetto HTML, l'oggetto window o qualsiasi altro oggetto che supporta eventi, come l'oggetto XMLHttpRequest.

Esempio

Aggiungi un ascoltatore di eventi che viene attivato quando l'utente aggiusta la dimensione della finestra:

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

Prova tu stesso

Passaggio dei parametri

Quando si passano parametri, utilizzare il "funzione anonima" come forma di parametro per chiamare la funzione specificata:

Esempio

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

Prova tu stesso

Propagazione degli eventi bolle o cattura?

Nell'HTML DOM ci sono due metodi di propagazione degli eventi: bolle e cattura.

La propagazione degli eventi è un metodo per definire l'ordine degli elementi quando si verifica un evento. Se c'è un elemento <p> all'interno di un elemento <div>, e l'utente clicca sull'elemento <p>, quale evento di click dovrebbe essere trattato per primo?

Nella propagazione bolle, l'elemento più interno viene trattato per primo, poi quelli più esterni: viene prima trattato l'evento di click dell'elemento <p>, poi quello dell'elemento <div>.

Nella propagazione di cattura, l'elemento più esterno viene trattato per primo, poi quelli più interni: viene prima trattato l'evento di click dell'elemento <div>, poi quello dell'elemento <p>.

Nel metodo addEventListener(), è possibile definire il tipo di propagazione utilizzando il parametro "useCapture":

addEventListener(evento, funzione, useCapture);

Il valore predefinito è falseverrà utilizzata la propagazione bolle, se il valore è impostato su truese questo valore è impostato su

Esempio

document.getElementById("myP").addEventListener("click", myFunction(), true);
document.getElementById("myDiv").addEventListener("click", myFunction(), true);

Prova tu stesso

removeEventListener()

removeEventListener() Il metodo rimuoverà i gestori di eventi già aggiunti tramite il metodo addEventListener() Gestori di eventi aggiunti tramite il metodo:

Esempio

elemento.removeEventListener("mousemove", myFunction());

Prova tu stesso

Supporto del browser

I numeri nella tabella specificano la versione del browser iniziale che supporta completamente questi metodi.

Metodo
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

Nota:IE 8, Opera 6.0 e versioni precedenti non supportano addEventListener() e removeEventListener() Metodo. Tuttavia, per queste versioni speciali di browser, è possibile utilizzare attachEvent() Metodo aggiunge un gestore eventi all'elemento e viene detachEvent() Metodo rimozione:

elemento.attachEvent(evento, funzione);
elemento.detachEvent(evento, funzione);

Esempio

Soluzione multi-browswer:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // Per i browser mainstream, eccetto IE 8 e versioni precedenti
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // Per IE 8 e versioni precedenti
    x.attachEvent("onclick", myFunction);
}

Prova tu stesso

Manuale di riferimento dell'Oggetto Evento DOM HTML

Per una lista completa di tutti gli eventi DOM HTML, visitare la nostra Manuale di riferimento dell'Oggetto Evento DOM HTML.