Metodo HTML DOM addEventListener ()

Esempi

Aggiungere un evento click nel documento. Quando l'utente fa clic in qualsiasi parte del documento, la id = "demo" del <p> uscita elemento "Ciao Mondo":

document.addEventListener ( "click", function () {
. Document.getElementById ( "demo") innerHTML = "Ciao Mondo";
});

Prova »

Definizione e utilizzo

Metodo document.addEventListener () viene utilizzato per aggiungere un gestore di eventi al documento.

Suggerimento: è possibile utilizzare document.removeEventListener () metodo per rimuovere il metodo addEventListener () per aggiungere gestori di eventi.

Suggerimento: Usa . Elemento addEventListener () elemento metodo specificato al gestore 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

Nota: Internet Explorer 8 e versioni precedenti di Internet Explorer non supportano il metodo addEventListener (), Opera 7.0 e le versioni precedenti non supportano Opera. Tuttavia, questo tipo di versione del browser può essere utilizzato il metodo attachEvent () per aggiungere un gestore di eventi (problemi di compatibilità cross-browser possono visualizzare "esempi").

grammatica

document.addEventListener (evento, funzione, useCapture)

Valore parametro

parametri	descrizione
evento	Richiesto. String nome della descrizione dell'evento. Nota: Non utilizzare il "on" prefisso. Ad esempio, utilizzare "click" invece di "onclick". Suggerimento: Tutti gli eventi HTML DOM, si può vedere la nostra completa HTML DOM oggetto evento di riferimento .
funzione	Richiesto. Esso descrive le funzioni dopo l'evento attivato. Quando l'evento viene attivato, l'oggetto evento come primo argomento passato alla funzione. oggetto tipo di evento dipende dal particolare evento. Ad esempio, "click" evento appartiene MouseEvent oggetto (evento del mouse).
useCapture	Opzionale. Un valore booleano che specifica se l'esecuzione evento nella cattura o fase di bubbling. Valori possibili: vero - gestore di eventi eseguiti durante la fase di cattura predefinito di falsi. I gestori di eventi vengono eseguiti nella fase di bubbling

dettagli tecnici

Versione DOM:	Livello DOM 2 Eventi
Ritorni:	Nessun valore di ritorno
Records:	In Firefox 6 e Opera 11.60 in useCapture parametro è facoltativo. (In Chrome, IE e Safari è sempre stato opzionale).

Altri esempi

Esempi

È possibile definibili con la funzione esterna nome della funzione:

document.addEventListener ( "click", myFunction);

la funzione myFunction () {
. Document.getElementById ( "demo") innerHTML = "Ciao Mondo";
}

Prova »

Esempi

È possibile aggiungere il numero di eventi nel documento, aggiungendo l'evento non sovrascriverà l'evento esistente.

Questo esempio dimostra come aggiungere un evento click in due documenti:

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

Prova »

Esempi

È possibile aggiungere diversi tipi di eventi nel documento.

Questo esempio dimostra come aggiungere più eventi in un documento:

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

Prova »

Esempi

Quando si passa un valore di parametro, utilizzare la chiamata di funzione con parametri "funzione anonima":

document.addEventListener ( "click", function () {
myFunction (P1, P2);
});

Prova »

Esempi

Modificare <body> del fondo:

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

Prova »

Esempi

Utilizzando il metodo removeEventListener () per rimuovere tramite metodo addEventListener () per aggiungere gestori di eventi:

// Aggiungere un gestore di eventi per il documento
document.addEventListener ( "MouseMove", myFunction);

// Rimuovere il gestore di eventi documento
document.removeEventListener ( "MouseMove", myFunction);

Prova »

Esempi

Se il browser non supporta il metodo addEventListener (), è possibile utilizzare il metodo attachEvent () invece.

L'esempio seguente mostra la soluzione cross-browser:

if (document.addEventListener) {// tutti i principali browser, ad eccezione di IE 8 e le versioni precedenti di IE
document.addEventListener ( "click", myFunction);
} Else if (document.attachEvent) {// IE 8 e le versioni precedenti di IE
document.attachEvent ( "onclick", myFunction);
}

Prova »