# JavaScript/Gli eventi nel DOM

JavaScript
Copertina Tutti i moduli · Sviluppo
* IntroduzioneJavaScript/Introduzione
* Il nostro primo programmaJavaScript/Il nostro primo programma
* Tipi di dati e variabiliJavaScript/Tipi di dati e variabili
* Operatori e castingJavaScript/Operatori e casting
* Le strutture di controllo
** SelezioneJavaScript/Selezione
** IterazioneJavaScript/Iterazione
* Funzioni definite dall'utenteJavaScript/Funzioni definite dall'utente
* Programmazione ad oggettiJavaScript/Oggetti
** Oggetto StringJavaScript/Oggetto String
** Oggetto MathJavaScript/Oggetto Math
** Oggetto DateJavaScript/Oggetto Date
** Oggetto ArrayJavaScript/Oggetto Array
* CookieJavaScript/Cookie
* TimerJavaScript/Timer
* L'oggetto windowJavaScript/BOM
** Gli eventi nel BOMJavaScript/Gli eventi nel BOM
** Oggetto documentJavaScript/Oggetto document
** Altri oggetti del BOMJavaScript/Altri oggetti del BOM
* Il Document Object ModelJavaScript/DOM
** Proprietà e metodiJavaScript/Proprietà e metodi del DOM
** Gli eventi nel DOMJavaScript/Gli eventi nel DOM
* Espressioni regolariJavaScript/Espressioni regolari
* AJAX
** Introduzione ad AJAXJavaScript/Introduzione ad AJAX
** Usare AJAXJavaScript/Usare AJAX
* Costruttori e prototipiJavaScript/Costruttori e prototipi
* AppendiceJavaScript/Appendice
* CreditiJavaScript/Crediti
Modifica il sommario
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

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:
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:
Nell'HTML si inserirà:

### 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:
tipo è una stringa che rappresenta il tipo di evento catturato. Può essere applicata ad ogni elemento del DOM, non solo agli elementi HTML.