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