JavaScript/Gli eventi nel DOM

Il modello evento del DOM in realtà non offre grandi funzionalità in più rispetto a quello del BOM di cui abbiamo visto una parte in precedenza; tuttavia il modello evento del DOM ha un migliore supporto e compatibilità tra i browser e, essendo il DOM l'ultima tecnologia sviluppata in questo campo, l'evoluzione del JavaScript non si baserà sul BOM bensì sul DOM.

Analogie con quanto già visto

Per approfondire, vedi JavaScript/Gli eventi nel BOM.

In realtà molto di ciò che è stato visto per il BOM è riutilizzabile anche con il DOM: sono uguali i nomi degli eventi, il funzionamento del collegamento tra oggetti ed eventi, l'uso dell'oggetto this

L'oggetto event

La funzionalità interessante che tratteremo ora è l'oggetto event, che permette di ottenere informazioni sull'evento appena scaturito, come l'elemento che lo ha generato o la posizione del mouse, e di eseguire codice JavaScript all'accadere di un evento.

Un evento è "qualcosa" che accade a un elemento HTML. Può essere rappresentato da un'interazione dell'utente, o da un evento che accade nel rendering della pagina (ad esempio la pagina ha finito di caricarsi), o altro. JavaScript può reagire a questi eventi ed eseguire del codice.

Possiamo utilizzarlo all'interno di un elemento HTML, ad esempio:

<a
href="pagina.html"
onmouseover="alert('Il mouse è alla posizione ' + event.screenX + ', ' + event.screenY +  'dello schermo');"
>
link
</a>

In questo esempio utilizziamo le due proprietà screenX e screenY dell'oggetto event, che restituiscono la posizione del cursore del mouse rispetto allo schermo.

Rispetto all'utilizzo di questo oggetto, bisogna fare attenzione quando si richiama da delle funzioni handler: l'oggetto event infatti ha una visibilità privata, non può quindi essere richiamato esternamente alla dichiarazione dell'evento (nell'attributo "onclick" per esempio). Per ovviare a questo problema è sufficiente passare l'oggetto event come argomento. Ad esempio, si crea la funzione:

function posizione (e) {
alert('Il mouse è alla posizione ' + e.screenX + ', ' + e.screenY +  'dello schermo');
}

Nell'HTML si inserirà:

<a href="pagina.html" onmouseover="posizione(event);">link</a>

Proprietà

• timestamp (funziona solo su FF) restituisce la data e l'ora in cui si è verificato l'evento;
• target e relatedTarget (srcElement e toElement su Internet Explorer) restituiscono rispettivamente il nodo che ha generato l'evento e il nodo su cui probabilmente sarà il mouse dopo che l'evento si sarà concluso (ad esempio è utile per gli eventi mouseOut). Quando si usano queste proprietà bisogna prima controllare il browser in uso dall'utente (vedi questa pagina);
• altKey, ctrlKey e shiftKey indicano rispettivamente se è premuto il tasto alt, ctrl o shift mentre avviene evento;
• button indica quale pulsante del mouse è stato premuto (0 il tasto sinistro, 1 quello destro);
• clientX e clientY indicano la posizione del cursore rispetto alla finestra del browser (a partire dall'angolo in alto a sinistra);
• screenX e screenY indicano la posizione del cursore rispetto allo schermo dell'utente (a partire dall'angolo in alto a sinistra).

addEventListner()

addEventListner() permette di impostare una funzione che verrà richiamata al verificarsi dell'evento specificato, sull'elemento specificato:

target.addEventListener(tipo, funzione);

tipo è una stringa che rappresenta il tipo di evento catturato. Può essere applicata ad ogni elemento del DOM, non solo agli elementi HTML.