Il addEventListener() metodo
Esempio
Aggiungere un listener di eventi che viene generato quando un utente fa clic su un pulsante:
document.getElementById("myBtn").addEventListener("click", displayDate); Prova tu stesso " Il addEventListener() metodo attribuisce un gestore di eventi per l'elemento specificato.
Il addEventListener() metodo attribuisce un gestore di eventi a un elemento senza sovrascrivere i gestori di eventi esistenti.
È possibile aggiungere molti gestori di eventi a un elemento.
È possibile aggiungere molti gestori di eventi dello stesso tipo di un elemento, vale a dire due "click" eventi.
È possibile aggiungere listener di eventi a qualsiasi DOM non oggetto solo elementi HTML. vale a dire l'oggetto finestra.
Il addEventListener() metodo rende più facile controllare come l'evento reagisce a bubbling.
Quando si utilizza il addEventListener() il metodo, il codice JavaScript è separato dal codice HTML, per una migliore leggibilità e consente di aggiungere listener di eventi, anche quando non si controlla il markup HTML.
Si può facilmente rimuovere un listener di eventi utilizzando il removeEventListener() metodo.
Sintassi
element .addEventListener( event, function, useCapture );Il primo parametro è il tipo di evento (come "click" o "mousedown" ).
Il secondo parametro è la funzione che vogliamo chiamare quando si verifica l'evento.
Il terzo parametro è un valore booleano che specifica se utilizzare spumeggiante evento o la cattura degli eventi. Questo parametro è facoltativo.
Si noti che non si utilizza il "on" prefisso per l'evento; usare "click" al posto di "onclick" .
Aggiungere un gestore eventi a un elemento
Esempio
Alert "Ciao Mondo!" quando l'utente fa clic su un elemento:
element .addEventListener("click", function(){ alert("Hello World!"); }); Prova tu stesso " È inoltre possibile fare riferimento a una funzione esterna "nome":
Esempio
Alert "Ciao Mondo!" quando l'utente fa clic su un elemento:
element .addEventListener("click",
myFunction);
function myFunction() {
alert ("Hello World!");
} Prova tu stesso " Aggiungere Molti gestori di eventi allo stesso elemento
Il addEventListener() metodo consente di aggiungere molti eventi allo stesso elemento, senza sovrascrivere gli eventi esistenti:
Esempio
element .addEventListener("click", myFunction);
element .addEventListener("click", mySecondFunction);
Prova tu stesso " È possibile aggiungere eventi di tipo diverso per lo stesso elemento:
Esempio
element .addEventListener("mouseover", myFunction);
element .addEventListener("click", mySecondFunction);
element .addEventListener("mouseout", myThirdFunction); Prova tu stesso " Aggiungere un gestore eventi per l'oggetto finestra
Il addEventListener() metodo consente di aggiungere listener di eventi su qualsiasi oggetto HTML DOM quali elementi HTML, il documento HTML, l'oggetto finestra, o altri oggetti che supportano gli eventi, come il xmlHttpRequest oggetto.
Esempio
Aggiungere un listener di eventi che viene generato quando un utente ridimensiona la finestra:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext ;
});
Prova tu stesso " Passaggio di parametri
Quando si passa i valori dei parametri, utilizzare una "funzione anonima" che chiama la funzione specificata con i parametri:
Bubbling evento o catturare eventi?
Ci sono due modi di propagazione degli eventi nel DOM HTML, frizzante e cattura.
propagazione degli eventi è un modo di definire l'ordine elemento quando si verifica un evento. Se si dispone di un <p> elemento all'interno di un <div> elemento, e l'utente fa clic sul <p> elemento, che di elemento "click" evento dovrebbe essere gestito in primo luogo?
Nel caso in cui il gorgogliare più di elemento interno è gestita prima e poi l'esterno: il <p> evento click dell'elemento viene gestito per primo, poi il <div> evento click dell'elemento.
Nel caso in cui il catturando più di elemento esterno è gestita prima e poi l'interno: il <div> evento click dell'elemento sarà gestita prima, poi il <p> evento click dell'elemento.
Con il addEventListener() metodo è possibile specificare il tipo di propagazione utilizzando il "useCapture" parametro:
addEventListener( event , function , useCapture );Il valore predefinito è false, che utilizzerà la propagazione spumeggiante, quando il valore è impostato su true, l'evento utilizza la propagazione di cattura.
Esempio
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
Prova tu stesso " Il removeEventListener() metodo
Il removeEventListener() metodo rimuove i gestori di eventi che sono stati allegati con l' addEventListener() metodo:
Supporto per il browser
I numeri nella tabella specifica la prima versione del browser che supporta pienamente 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: Il addEventListener() e removeEventListener() metodi non sono supportati in IE 8 e versioni precedenti e Opera 6.0 e versioni precedenti. Tuttavia, per queste versioni specifiche del browser, è possibile utilizzare la attachEvent() metodo per collegare un gestori di eventi all'elemento, e il detachEvent() metodo per rimuoverlo:
element. attachEvent (event, function);
element. detachEvent (event,
function); Esempio
soluzione cross-browser:
var x = document.getElementById("myBtn");
if (x.addEventListener) {
// For all major browsers, except IE 8 and earlier
x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
// For IE 8 and earlier versions
x.attachEvent("onclick", myFunction);
}
Prova tu stesso " HTML DOM oggetto evento di riferimento
Per un elenco di tutti gli eventi HTML DOM, guarda la nostra completa HTML DOM oggetto evento di riferimento .