Esempio
Fissare un evento click ad un <button> elemento. Quando l'utente fa clic sul pulsante, l'uscita "Hello World" in un <p> elemento con id = "demo":
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
}); Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e l'utilizzo
addEventListener() metodo attribuisce un gestore di eventi per l'elemento specificato.
Suggerimento: Utilizzare la removeEventListener() metodo per rimuovere un gestore di eventi che è stato allegato con addEventListener() metodo.
Suggerimento: utilizzare il documento. addEventListener() metodo per collegare un gestore di eventi al documento.
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
element .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.
Questo esempio dimostra come eseguire una funzione quando un utente fa clic su un <button> elemento:
document.getElementById("myBtn").addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Prova tu stesso " Esempio
È possibile aggiungere numerosi eventi allo stesso elemento, senza sovrascrivere gli eventi esistenti.
Questo esempio dimostra come aggiungere due eventi click sullo stesso <button> elemento:
document.getElementById("myBtn").addEventListener("click",
myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction); Prova tu stesso " Esempio
È possibile aggiungere eventi di tipo diverso allo stesso elemento.
Questo esempio dimostra come aggiungere molti eventi sulla stessa <button> elemento:
document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").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.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
}); Prova tu stesso " Esempio
Cambiare il colore di sfondo <button> elemento:
document.getElementById("myBtn").addEventListener("click", function(){
this.style.backgroundColor = "red";
}); Prova tu stesso " Esempio
Utilizzando il parametro useCapture opzionale per dimostrare la differenza tra spumeggiante e la cattura:
document.getElementById("myDiv").addEventListener("click", myFunction,
true); 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 <div>
document.getElementById("myDIV").addEventListener("mousemove",
myFunction);
// Remove the event handler from <div>
document.getElementById("myDIV").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:
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 " Pagine correlate
JavaScript Tutorial: HTML DOM EventListener
HTML DOM Riferimento: documento. addEventListener()