Argomenti trattati: eventi, event handler e listener.
Un evento in JavaScript può essere definito come qualcosa che accade in risposta
all'azione dell'utente.
Ad esempio, un click del mouse su un elemento della finestra del browser
provoca un evento.
Un altro esempio è lo spostamento del puntatore del mouse su un elemento.
In JavaScript gli
eventi sono predefiniti dall'implementazione del browser e riguardano la finestra tramite la quale
l'utente visualizza la pagina, il documento HTML in esso contenuto e tutti gli
elementi che lo caratterizzano (vedi DOM). La forza
di JavaScript risiede proprio nella possibilità di gestire questi eventi, che
vengono richiamati tramite il gestore dell'evento
considerato (o event handler).
Ad esempio, quando il documento viene caricato (load)
il browser riconosce l'evento del caricamento. JavaScript mette perciò a
disposizione il gestore onload, traducibile come
"ciò che eseguo al momento del caricamento" che generalmente
viene inserito nel tag <BODY>, ove si riferisce al caricamento del
documento.
La sintassi dell'event handler sarà:
prefisso on + nome_evento.
Si può scrivere quindi:
| (......) <body onload="istruzione_JavaScript"> (......) |
dove istruzione_JavaScript può essere sostituito con qualunque istruzione
scelta dal programmatore, ad esempio la tipica:
onload="alert('il documento è stato
caricato!')"
oppure una funzione, come:
onload="mia_funzione(miei_parametri)"
oppure addirittura un'istruzione (cosa generalmente non utilizzata).
Stabilito dunque che inserendo un gestore di eventi in un certo elemento HTML
si può richiamare direttamente JavaScript, come è possibile conoscere quali
sono gli eventi che possono essere gestiti da ciascun elemento?
Questo dipende strettamente dal browser.
Ogni oggetto possiede una serie predefinita di eventi cui rispondere e non è detto che un evento riconosciuto da MSIE lo sia anche da Netscape o da Opera.
L'oggetto che è in ascolto sull'evento è definito listener, termine traducibile come ascoltatore. Per comprendere questo concetto, ci si può riferire agli eventi legati all'azione del mouse. Ad esempio, con un click su un pulsante, che è predisposto ad ascoltare l'evento che si verifica quando viene premuto, la pressione del mouse può essere gestita attraverso il gestore onmousedown.
Se il mouse viene rilasciato, il pulsante riconoscerà che l'evento di rilascio si è verificato e potrà essere gestito attraverso il gestore onmouseup.
Tornando all'esempio del click del mouse sulla cella di una tabella:
|
clicca col mouse! |
Il codice è il seguente:
| <table border="0" width="35%" bgcolor="#FFFFFF"> <tr> <td width="100%" onclick="alert('evento riconosciuto!')"> <p align="center"><font color="#FF0000">clicca col mouse!</font></td> </tr> </table> |
Come spiegato poco sopra, non tutte le versioni del browser risponderanno direttamente a questo evento.
In questa sede, laddove non specificato , per questioni legate ai tempi di pubblicazione, saranno trattati
gli eventi principali relativi a MSIE. Speriamo di poter completare il
sito in un momento successivo, differenziando gli eventi supportati dai 2
browser in modo + completo. Generalmente comunque, gli eventi più
caratteristici sono riconosciuti su entrambi i browser.
Rimandiamo alle specifiche JavaScript
per Netscape Navigator per ulteriori informazioni, dove è spiegato in modo molto
semplice, dato ogni oggetto trattato, quali sono gli eventi che gli possono
essere associati.
Vi sono vari modi per definire il codice relativo alla risposta ad un certo evento.
Allo stesso modo, vi è la possibilità di utilizzare i metodi e le proprietà dell'oggetto event, oggetto sussidiario dell'oggetto window rispetto al DOM. Tratteremo dunque in due sezioni separate la gestione degli eventi per MSIE e per NN.
MSIE e gli eventi | NN e gli eventi