JavaScript/Gli eventi nel DOM

Wikibooks, manuali e libri di testo liberi.

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 migliori 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.

[modifica] Analogie con quanto già visto

Per approfondire, vedi la pagina JavaScript/Gli eventi nel BOM.

In realtà molte 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

[modifica] 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.

Possiamo utilizzarlo dentro alla dichiarazione dell'evento, 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> </source>

[modifica] 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 le posizioni del cursore rispetto alla finestra del browser (a partire dall'angolo in altro a destra);
• screenX e screenY indicano le posizioni del cursore rispetto allo schermo dell'utente (a partire dall'angolo in altro a destra).