JavaScript HTML DOM EventListener
Il metodo addEventListener()
Esempio
Aggiungi un listener di eventi che si attiva quando un utente fa clic su un pulsante:
document.getElementById("myBtn").addEventListener("click", displayDate);
Il addEventListener()metodo associa un gestore di eventi all'elemento specificato.
Il addEventListener()metodo collega un gestore di eventi a un elemento senza sovrascrivere i gestori di eventi esistenti.
Puoi aggiungere molti gestori di eventi a un elemento.
È possibile aggiungere molti gestori di eventi dello stesso tipo a un elemento, ovvero due eventi "clic".
Puoi aggiungere listener di eventi a qualsiasi oggetto DOM non solo agli elementi HTML. cioè l'oggetto finestra.
Il addEventListener()metodo semplifica il controllo del modo in cui l'evento reagisce al gorgogliamento.
Quando si utilizza il addEventListener()metodo, JavaScript è separato dal markup HTML, per una migliore leggibilità e consente di aggiungere listener di eventi anche quando non si controlla il markup HTML.
Puoi rimuovere facilmente un listener di eventi usando il removeEventListener()metodo.
Sintassi
element.addEventListener(event, function, useCapture);
Il primo parametro è il tipo di evento (come " click" o " mousedown" o qualsiasi altro evento DOM HTML .)
Il secondo parametro è la funzione che vogliamo chiamare quando si verifica l'evento.
Il terzo parametro è un valore booleano che specifica se utilizzare il bubbling di eventi o l'acquisizione di eventi. Questo parametro è facoltativo.
Nota che non usi il prefisso "on" per l'evento; usa " click" invece di " onclick".
Aggiungi un gestore di eventi a un elemento
Esempio
Avviso "Ciao mondo!" quando l'utente fa clic su un elemento:
element.addEventListener("click", function(){ alert("Hello World!"); });
Puoi anche fare riferimento a una funzione "denominata" esterna:
Esempio
Avviso "Ciao mondo!" quando l'utente fa clic su un elemento:
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
Aggiungi molti gestori di eventi allo stesso elemento
Il addEventListener()metodo consente di aggiungere più eventi allo stesso elemento, senza sovrascrivere gli eventi esistenti:
Esempio
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
Puoi aggiungere eventi di tipo diverso allo stesso elemento:
Esempio
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
Aggiungi un gestore di eventi all'oggetto finestra
Il addEventListener()metodo consente di aggiungere listener di eventi su qualsiasi oggetto DOM HTML come elementi HTML, documento HTML, oggetto finestra o altri oggetti che supportano eventi, come l' xmlHttpRequestoggetto.
Esempio
Aggiungi un listener di eventi che si attiva quando un utente ridimensiona la finestra:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
Passaggio di parametri
Quando si passano i valori dei parametri, utilizzare una "funzione anonima" che chiama la funzione specificata con i parametri:
Esempio
element.addEventListener("click", function(){ myFunction(p1, p2); });
Bubbling di eventi o acquisizione di eventi?
Esistono due modi di propagazione degli eventi nel DOM HTML, il bubbling e l'acquisizione.
La propagazione degli eventi è un modo per definire l'ordine degli elementi quando si verifica un evento. Se si dispone di un elemento <p> all'interno di un elemento <div> e l'utente fa clic sull'elemento <p>, quale evento "clic" dell'elemento deve essere gestito per primo?
Nel bubbling viene gestito prima l'evento dell'elemento più interno e poi quello esterno: viene gestito prima l'evento clic dell'elemento <p>, quindi l'evento clic dell'elemento <div>.
Nell'acquisizione dell'evento più esterno dell'elemento viene gestito prima e poi quello interno: verrà gestito prima l'evento click dell'elemento <div>, quindi l'evento click dell'elemento <p>.
Con il metodo addEventListener() puoi specificare il tipo di propagazione utilizzando il parametro "useCapture":
addEventListener(event, function, useCapture);
Il valore predefinito è false, che utilizzerà la propagazione del bubbling, quando il valore è impostato su true, l'evento utilizza la propagazione dell'acquisizione.
Esempio
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
Il metodo removeEventListener()
Il removeEventListener()metodo rimuove i gestori di eventi che sono stati collegati con il metodo addEventListener():
Esempio
element.removeEventListener("mousemove", myFunction);
Riferimento oggetto evento DOM HTML
Per un elenco di tutti gli eventi HTML DOM, guarda il nostro completo HTML DOM Event Object Reference .