Eventi del DOM (browser e device)

In questa e nelle prossime lezioni esamineremo la gestione degli eventi del Browser, una delle parti più importanti dell'API che riguarda Browser e DOM.

Gli eventi sono così interessanti perché ci consentono di gestire il comportamento delle nostre applicazioni al verificarsi di una certa interazione dell'utente, oppure di rispondere alle sollecitazioni che vengono da altre applicazioni o dal sistema stesso.

Eventi e handler

Per intercettare gli eventi che vengono scatenati, utilizziamo il meccanismo degli handler (o dei listener). Possiamo definire come handler una funzione di callback che viene associata ad un certo evento.

I meccanismi per associare eventi e handler sono sostanzialmente tre:

• Via codice, sfruttando la funzione addEventListener().
• All'interno del markup HTML, sfruttando speciali attributi dei tag;
• Nel codice JavaScript, associando specifiche proprietà degli elementi del DOM;

addEventListener, associare callback agli eventi

La funzione addEventListener() è un metodo esposto dagli elementi del DOM e rappresenta la più comune tra le modalità usate per associare un evento al rispettivo handler. La sua sintassi è molto semplice:

elemento.addEventListener(evento, callback, [useCapture]);

Parametro	Descrizione
evento	È una stringa che definisce l'evento che vogliamo gestire (es. "load" o "click")
callback	qui inseriamo la chiamata a callback che definisce l'hanlder vero e proprio
useCapture	Serve per "forzare" la priorità di gestione di un certo evento. Questo nei casi in cui abbiamo associato diversi handler allo stesso evento (allora il primo diventa quello con useCapture = true) serve dare priorità all'handler posizionato su un certo livello dell'albero (normalmente gli handler sono eseguiti e propagati dalle foglie verso la radice del DOM) Per default è impostato a false.

Facciamo un esempio molto semplice. Supponiamo di avere il classico link:

<a href="#" id="test">test</a>

Nella fase di descrizione dell'elemento (detto "strato di presentazione") non facciamo nessuna ipotesi sul comportamento associato a questo link. Possiamo invece definire una funzione di callback che gestisca l'evento click sul link e associarla all'evento direttamente da codice (a livello di logica applicativa):

<script>
// definisce la funzione callback
function clickOnTest(event){
	console.log('Click su test');
}
// ottiene l'elemento 'test'
var test = document.getElementById('test');
// associa l'evento click alla callback
test.addEventListener('click', clickOnTest);
</script>

Naturalmente avremmo ottenuto lo stesso risultato utilizzando una funzione implicita:

test.addEventListener('click', function(event) { 
	console.log('Click su test');
});

Ma non sempre è conveniente.

L'oggetto Event

Come si vede dagli esempi la nostra funzione di callback prende sempre un parametro che abbiamo chiamato (non a caso) event. Si tratta di un oggetto che contiene alcune informazioni circa l'evento che è stato scatenato: cose come il bottone del mouse che è stato premuto o il tasto della tastiera che abbiamo schiacciato.

I vantaggi di addEventListener

Rispetto alle altre modalità addEventListener permette una gestione più raffinata degli handler, consente di definirne e gestirne più di uno per lo stesso evento e funziona con qualunque elemento del DOM (non solo con gli elementi HTML).

Altro vantaggio sta nel fatto che possiamo rimuovere l'associazione tra evento e handler utilizzando la funzione removeEventListener che prende gli stessi parametri di addEventListener ma ha la funzione opposta. Ad esempio per smettere di gestire il click sull'elemento test, che avevamo inserito prima, scriveremo:

test.removeEventListener('click', clickOnTest);

Handler associati nell'HTML

Possiamo anche inserire la chiamata alla nostra funzione di callback direttamente nella definizione di un tag HTML, utilizzando alcuni speciali attributi. Ecco un esempio:

<a href="#" onclick="alert('ciao')">Link</a>

In questo caso l'evento onclick è un attributo che prende come valore la chiamata alla relativa callback.

Questa modalità è sempre meno utilizzata e poco consigliabile perché favorisce troppo l'accoppiamento tra layout della pagina (HTML) e logica applicativa (JavaScript). In un'ottica di buona manutenzione del software è sempre meglio tentare di tenere le due cose separate.

this

In questa modalità quando la funzione di callback viene chiama, questa acquisisce lo scope dell'elemento del DOM cui è associata. Il risultato è che l'oggetto this assume il valore dell'elemento. Ecco un esempio:

<a href="#" onclick="alert(this.innerHTML)">Ciao</a>

Cliccando sul link otterremo una finestra che riporterà "Ciao" il contenuto dell'elemento!

Handler associati tramite proprietà degli elementi

Possiamo associare gli handler degli eventi direttamente alle relative proprietà degli oggetti del DOM, con una sintassi simile a questa:

Oggetto.evento = handler;

Per esempio:

document.images[0].onload = alert('Immagine caricata');

Anche questa modalità è sempre meno utilizzata, più che altro perché risulta scomoda.