Come abbiamo visto da molto tempo, il codice JS può interfacciarsi con gli elementi di una pagina HTML attraverso gli eventi, cioè un'azione compiuta dall'utente su un elemento di una pagina. Per esempio:
In questo caso cliccando sull'immagine viene scatenato l'evento onclick, il quale chiama la funzione muovi().
Un modo alternativo per ottenere la stessa cosa è utilizzare un event listener (letteralmente "ascoltatore di eventi"). E' più facile vedere come si fa che spiegarlo a parole. Basta infatti inserire nella parte dedicata al codice JS la seguente istruzione:
document.getElementById('omino').addEventListener("click", muovi);
</script>
ATTENZIONE: In questo caso lo script non deve essere incluso nell'head del documento html poiché fa riferimento a un elemento della pagina (l'immagine con id='omino') che ancora non esiste al momento del caricamento dell'head. Perché tutto funzioni correttamente lo script deve essere inserito nel body dopo la dichiarazione dell'elemento img (preferibilmente alla fine della pagina, vedi anche l'esempio in fondo). Questa restrizione non si applica se addEventListener è applicato direttamente all'oggetto document, poiché questo esiste da subito, dal momento in cui viene caricata la pagina.
Il metodo addEventListener può essere applicato a qualsiasi elemento della pagina (e anche all'intera finestra window) e associa all'elemento una funzione da chiamarsi in corrispondenza di un evento. La sintassi è abbastanza semplice:
elemento.addEventListener("evento", funzione)
Si osservi solo che il nome dell'evento non è preceduto da "on" (bisogna scrivere "click" invece di "onclick", "mouseover" invece di "onmouseover" etc.) e che il nome della funzione non è accompagnato dalle parentesi tonde.
Per il resto addEventListener funziona esattamente come il gestore di eventi (onclick, nel nostro esempio) applicato direttamente all'elemento.
Quali sono dunque i vantaggi di usare un event listener, invece che il metodo che abbiamo fin qui utilizzato? Un primo vantaggio è che in questo modo il codice JS risulta completamente separato dal codice html della pagina. Infatti, rimuovendo i gestori di eventi dalla pagina (togliendo per esempio onclick nel nostro caso) l'html risulta completamente "ripulito" da ogni riferimento al codice JS e questo migliora la chiarezza del codice.
Inoltre l'event listener può essere modificato e aggiunto dinamicamente dal codice JS. Per esempio il codice seguente visualizza un form con due pulsanti (button1 e button2). Per poter visualizzare l'alert con il messaggio "Sequenza corretta!" occorre cliccare prima su button1, in modo da aggiungere l'event listener a button2, e quindi su button2 per visualizzare il messaggio:
<form>
<input type="button" id="button1" value="Clicca prima qui">
<input type="button" id="button2" value="E poi qui">
</form>
<script>
document.getElementById("button1").addEventListener("click", attiva);
function attiva()
{
document.getElementById("button2").addEventListener("click", messaggio);
}
function messaggio()
{
alert("Sequenza corretta!");
}
</script>
</body>
Si noti la posizione di <script> in fondo al body, affinché si possa usare l'istruzione
document.getElementById("button1").addEventListener("click", attiva);
(l'istruzione viene eseguita dopo la creazione di button1).
Il metodo removeEventListener consente di rimuovere un event listener da un elemento. Per esempio:
In questo caso viene rimossa l'associazione fra l'evento click sull'oggetto e la funzione muovi.
precedente
Sito realizzato in base al template offerto da
http://www.graphixmania.it
