Sommario
addEventListener() permette di impostare delle funzioni che verranno chiamate al verificarsi dell'evento specificato, sull'oggetto specificato(target dell'evento).
Sintassi
target.addEventListener(tipo, codiceChiamato, usaCapture);
- tipo
- Stringa che rappresenta il tipo di evento su cui mettersi in ascolto.
- codiceChiamato
- L'oggetto che riceve una notifica quando avviene l'evento specificato. Deve essere un oggetto che implementa l'interfaccia
EventListener,o anche una semplice funzione Javascript. - usaCapture
- Se impostato a true,
usaCaptureindica che l'utente vuole utilizzare il capturing anzichè il bubbling (default). Quando la cattura inizia, tutti gli eventi del tipo specificato verranno propagati ai listener registrati prima di essere mandati a qualunque EventTarget sotto di essi nell'albero DOM. Gli eventi sopra di esso nell'albero DOM non innescheranno un EventListener che usa capture. Leggi per una spiegazione dettagliata.
Esempio
<html>
<head>
<title>DOM Event Example</title>
<style type="text/css">
#t { border: 1px solid red }
#t1 { background-color: pink; }
</style>
<script type="text/javascript">
// Function to change the content of t2
function modifyText() {
var t2 = document.getElementById("t2");
t2.firstChild.nodeValue = "three";
}
// Function to add event listener to t
function load() {
var el = document.getElementById("t");
el.addEventListener("click", modifyText, false);
}
</script>
</head>
<body onload="load();">
<table id="t">
<tr><td id="t1">one</td></tr>
<tr><td id="t2">two</td></tr>
</table>
</body>
</html>
Nell'esempio qui sopra, modifyText() è un listener per l'evento click registrato usando addEventListener(). Un click in un punto qualunque della tabella risalirà fino all'handler e causerà l'esecuzione di modifyText().
Note
Perchè usare addEventListener?
addEventListener è il modo corretto per registrare un listener, come da specifica W3C. I suoi benefici sono:
- permette di aggiungere diversi handler per singolo evento. Ciò è particolarmente utile per le librerie DHTML e per le estensioni di Mozilla, che devono convivere tra loro senza andare in conflitto.
- Dà un controllo migliore di cosa succede quando il listener viene attivato(capturing vs bubbling)
- funziona con qualunque elemento DOM, non solo con gli elementi HTML.
Aggiungere un listener durante la propagazione dell'evento
Se si aggiunge un EventListener a un EventTarget mentre un evento viene processato, questo non sarà innescato dall'azione corrente, ma verrà aggiunto in una fase successiva del flusso dell'evento, come nella fase di bubbling.
Quando si hanno diversi ascoltatori di evento identici
Se più ascoltatori di evento identici sono registrati sullo stesso EventTarget con gli stessi parametri, le istanze duplicate saranno eliminate. Non fanno in modo che l'ascoltatore di eventi sia chiamato due volte e dato che sono eliminati, non è necessario rimuoverli col metodo removeEventListener.
Il valore di this
Registrare una funzione con addEventListener() cambia il valore di this—da notare che il valore di this è passato alla funzione dalla funzione chiamante.
Nell'esempio seguente, il valore di this all'interno di modifyText() quando è chiamato dall'evento onclick è una referenza alla tabella 't'. Se il gestore dell'evento onclick è aggiunto al sorgente HTML:
<table id="t" onclick="modifyText();"> ... </table>
allora il valore di this all'interno di modifyText() quando è chiamato dall'evento onclick sarà una referenza all'oggetto globale (window).
Passaggio automatico dell'oggetto event
Nel DOM di Gecko, quando gli eventi sono registrati dinamicamente una referenza all'oggetto event che ha causato l'evento è automaticamente passata come primo parametro - consulta la pagina Gecko DOM event.
Altri DOM(compatibilità con Internet Explorer)
Alcune implementazioni DOM supportano attachEvent al posto di addEventListener. Per supportarli, l'esempio seguente può essere modificato come:
if (el.addEventListener){
el.addEventListener('click', modifyText, false);
} else if (el.attachEvent){
el.attachEvent('onclick', modifyText);
}
Maniera tradizionale per impostare eventi
addEventListener è stato introdotto nella specifica DOM 2 Events. Prima di questo, gli eventi erano registrati come segue:
// Using a function reference—note lack of '()'
el.onclick = modifyText;
// Using a function statement
element.onclick = function(){
...statements...
};
In questo modo vengono rimpiazzati i gestori dell'evento onclick sull'elemento se ce ne sono. Similmente per gli altri eventi 'on' come onblur, onkeypress, e così via.
Perchè era essenzialmente parte del DOM 0, questo metodo è ampiamente supportato e non richiede codice aggiuntivo per una soluzione cross–browser; quindi è normalmente usato per registrare eventi dinamicamente a meno che siano necessarie funzioni extra di addEventListener.