JavaScript HTML DOM EventListener
metodo addEventListener ()
Esempi
L'ascolto di eventi attivato quando l'utente fa clic sul pulsante:
Prova »
metodo addEventListener () viene utilizzato per aggiungere un gestore di eventi per un elemento specificato.
metodo addEventListener () per aggiungere il gestore di eventi non sovrascrive il gestore di eventi esistente.
È possibile aggiungere più gestori di eventi a un elemento.
È possibile aggiungere più di uno dello stesso tipo di gestore di eventi allo stesso elemento, come ad esempio: due "click" evento.
È possibile aggiungere oggetti a qualsiasi listener di eventi DOM, non solo elementi HTML. Come ad esempio: la finestra oggetto.
metodo addEventListener () può facilmente controllare evento (frizzante e cattura).
Quando si utilizza il metodo addEventListener (), JavaScript tag HTML da sinistra a scolpire, più leggibile, in assenza di tag HTML di controllo può anche aggiungere listener di eventi.
È possibile utilizzare il metodo removeEventListener () per rimuovere un listener di eventi.
grammatica
Il primo parametro è il tipo (ad esempio "click" o "MouseDown") evento.
Il secondo argomento è la chiamata di funzione viene attivata dopo l'evento.
Il terzo parametro è un valore booleano che è utilizzata per descrivere un gorgogliamento evento o la cattura. Questo parametro è facoltativo.
 | Nota: Non utilizzare il "on" prefisso. Ad esempio, utilizzare "click", invece di "onclick". |
|---|
elementi originali aggiungere un gestore di eventi
Esempi
Quando l'utente fa clic sull'elemento pop-up quando il "Ciao Mondo!":
Prova »
È possibile utilizzare il nome della funzione di fare riferimento a una funzione esterna:
Esempi
Quando l'utente fa clic sull'elemento pop-up quando il "Ciao Mondo!":
la funzione myFunction () {
alert ( "Ciao Mondo!");
}
Prova »
Aggiungere più gestori di eventi per lo stesso elemento
metodo addEventListener () consente di aggiungere più eventi agli stessi elementi, e non sovrascrive gli eventi esistenti:
Esempi
elemento .addEventListener ( "click", mySecondFunction );
Prova »
È possibile aggiungere agli stessi elementi in diversi tipi di eventi:
Esempi
elemento .addEventListener ( "click", mySecondFunction );
elemento .addEventListener ( "mouseout", myThirdFunction );
Prova »
Aggiungere un gestore di eventi per l'oggetto finestra
metodo addEventListener () consente di aggiungere oggetti del listener di eventi DOM HTML, oggetti HTML DOM come ad esempio: elementi HTML, documenti HTML, oggetto finestra. Gli oggetti evento o altre spese come ad esempio: oggetto XMLHttpRequest.
Esempi
Quando l'utente ripristina le dimensioni della finestra per aggiungere i listener di eventi:
. Document.getElementById ( "demo") innerHTML = someText;
});
Prova »
Passaggio di parametri
Quando si passa un valore di parametro, utilizzare la chiamata di funzione con parametri "funzione anonima":
acquisizione della corsa o bubbling degli eventi?
La consegna evento in due modi: frizzante e cattura.
L'ordine di consegna evento degli elementi definiti trigger di evento. Se <p> elemento nel <div> elemento, l'elemento utente fa clic su <p>, quale elemento della manifestazione "click" per essere attivato esso?
Bubbling, l'evento sarà un elemento interno si attiva, quindi attivare gli elementi esterni, vale a dire: un evento click <p> elemento viene attivato per primo, poi innesca l'evento Click <div> elemento.
Nella cattura, l'evento sarà un elemento esterno viene attivato, elementi interni allora l'evento viene attivato, vale a dire: <div> elemento per innescare un evento click, e quindi innescare un evento click <p> elemento.
addEventListener () per specificare il parametro "useCapture" per impostare il tipo di consegna:
Il valore predefinito è false, che sta bollendo a passare, quando il valore è vero, utilizzare l'evento per catturare il trasferimento.
il metodo removeEventListener ()
removeEventListener () metodo per rimuovere il metodo addEventListener () per aggiungere gestori di eventi:
Supporto per il browser
I dati riportati nella tabella rappresentano il primo browser a supportare il numero di versione metodo.
| modo | |||||
|---|---|---|---|---|---|
| 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 e versioni precedenti di Internet Explorer, Opera 7.0 e le versioni precedenti non supportano il metodo addEventListener () e removeEventListener (). Tuttavia, questo tipo di versione del browser può essere utilizzato il metodo detachEvent () per rimuovere un gestore di eventi:
element.detachEvent (evento, funzione);
Esempi
soluzione cross-browser:
if (x.addEventListener) {// tutti i principali browser, ad eccezione di IE 8 e versioni precedenti
x.addEventListener ( "click", myFunction);
} Else if (x.attachEvent) {// IE 8 e versioni precedenti
x.attachEvent ( "onclick", myFunction);
}
Prova »
HTML DOM oggetto evento di riferimento
Tutti gli eventi HTML DOM, si può vedere la nostra completa HTML DOM oggetto evento di riferimento .