JavaScript/Gli eventi nel DOM

Wikibooks, manuali e libri di testo liberi.
Indice del libro

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

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

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

  • 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()[modifica]

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.