Esempio
Fissare un evento click al documento. Quando l'utente fa clic in qualsiasi punto del documento, uscita "Hello World" in un <p> elemento con id = "demo":
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
}); Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e l'utilizzo
Il document. addEventListener() document. addEventListener() metodo attribuisce un gestore di eventi al documento.
Suggerimento: utilizzare il documento. removeEventListener() metodo per rimuovere un gestore di eventi che sono stati associati con addEventListener() metodo.
Suggerimento: Utilizzare l'elemento. addEventListener() metodo per collegare un gestore di eventi a un elemento specificato.
Supporto browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente il metodo.
| Metodo | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
Nota: addEventListener() metodo non è supportato in Internet Explorer 8 e versioni precedenti, e Opera 6.0 e versioni precedenti. Tuttavia, per queste versioni specifiche del browser, è possibile utilizzare attachEvent() metodo per associare i gestori di eventi (see "More Examples" below for a cross-browser solution) .
Sintassi
document.addEventListener( event , function ,
useCapture )
valori dei parametri
| Parametro | Descrizione |
|---|---|
| event | Necessario. Una stringa che specifica il nome dell'evento. Nota: Non utilizzare il "on" prefisso. Ad esempio, utilizzare "click" al posto di "onclick" . Per un elenco di tutti gli eventi HTML DOM, guarda la nostra completa HTML DOM oggetto evento di riferimento . |
| function | Necessario. Specifica la funzione da eseguire quando si verifica l'evento. Quando si verifica l'evento, un oggetto evento viene passato alla funzione come primo parametro. Il tipo dell'oggetto evento dipende l'evento specificato. Ad esempio, il "click" evento fa parte dell'oggetto MouseEvent. |
| useCapture | Opzionale. Un valore booleano che specifica se l'evento deve essere eseguito nella cattura o alla fase di bubbling. Valori possibili:
|
Dettagli tecnici
| DOM Versione: | Livello DOM 2 Eventi |
|---|---|
| Valore di ritorno: | Nessun valore di ritorno |
| changelog: | Il parametro useCapture è diventato opzionale in Firefox 6 e Opera 11.60 (has always been optional for Chrome, IE and Safari) |
Altri esempi
Esempio
Si può anche fare riferimento a un esterno "named" la funzione:
document.addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Prova tu stesso " Esempio
È possibile aggiungere eventi al documento, senza sovrascrivere gli eventi esistenti.
Questo esempio dimostra come aggiungere due eventi click al documento:
document.addEventListener("click",
myFunction);
document.addEventListener("click", someOtherFunction); Prova tu stesso " Esempio
È possibile aggiungere eventi di tipo diverso al documento.
Questo esempio dimostra come aggiungere eventi al documento:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction); Prova tu stesso " Esempio
Quando si passa valori dei parametri, utilizzare una "anonymous function" che chiama la funzione specificata con i parametri:
document.addEventListener("click", function() {
myFunction(p1, p2);
}); Prova tu stesso " Esempio
Cambiare il colore del fondo del documento <body> elemento:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
}); Prova tu stesso " Esempio
Utilizzando il removeEventListener() metodo per rimuovere un gestore di eventi che è stato allegato con addEventListener() Metodo:
// Attach an event handler to the document
document.addEventListener("mousemove",
myFunction);
// Remove the event handler from the document
document.removeEventListener("mousemove", myFunction); Prova tu stesso " Esempio
Per i browser che non supportano addEventListener() metodo, è possibile utilizzare attachEvent() metodo.
Questo esempio dimostra una soluzione cross-browser:
if (document.addEventListener) { // For all major browsers, except IE 8 and earlier
document.addEventListener("click", myFunction);
} else if (document.attachEvent) { // For IE 8 and earlier versions
document.attachEvent("onclick", myFunction);
} Prova tu stesso " Pagine correlate
JavaScript Tutorial: HTML DOM EventListener
HTML DOM Riferimento: elemento. addEventListener()