Oltre essere organizzato a oggetti e metodi, JavaScript sfrutta moltissimo la presenza degli eventi.
Un evento è – molto semplicemente – qualcosa che accade nel documento.
Anche nella vita quotidiana un evento è qualcosa che accade: ad esempio una tazzina di caffè che cade e si rompe. Il documento dunque è l'ambiente entro cui vengono realizzate delle "azioni", in parte dovute alla volontà dell'utente (passaggio del mouse su un link, click su qualcosa...), altre volte dovute alla situazione contingente (la pagina è stata caricata).
Grazie agli eventi possiamo "impacchettare" il codice scritto attraverso JavaScript e farlo eseguire non appena l'utente esegue una data azione: quando clicca su un bottone di un form possiamo controllare che i dati siano nel formato giusto; quando passa su un determinato link possiamo scambiare due immagini, eccetera.
Gli eventi (le possibili cose che possono capitare all'interno della pagina) sono davvero tanti e ogni nuova versione del browser si arricchisce di nuove possibilità messe a disposizione degli sviluppatori. Vediamo quali sono quegli eventi che vi capiterà più spesso di incontrare.
Come si può vedere dagli esempi il modo corretto per sfruttare gli eventi è quello di inserire l'evento all'interno della sintassi dell'elemento HTML e racchiudere il codice JavaScript tra virgolette. Secondo questo modello:
<ELEMENTO nomeEvento="codice JavaScript">
Abbiamo già incontrato in precedenza l' "alert" è una finestra di dialogo che avverte di qualcosa.
Negli esempi qui sotto, quando viene eseguita una determinata azione, viene mostrato un alert con scritto "ciao".
|
Un discorso a parte merita l'evento onFocus, che spesso suscita delle perplessità. "onFocus" significa "quando l'elemento è focalizzato": significa che in quel momento è attivo quel determinato elemento della pagina HTML.
Nel caso dei link e delle mappe vi potete accorgere bene di quando l'elemento ha il focus: il link o la mappa ha infatti una piccola linea tratteggiata che lo circonda (nel caso del link, se l'elemento è focalizzato, si trova nello stato "ACTIVE").
Anche nel caso delle finestre del browser è facile accorgersi di quando un elemento ha il focus: con Windows se la finestra ha il focus (basta che si trovi in primo piano) la barra in alto è azzurra (o del colore definito dall'utente), in caso contrario è grigia.
onBlursemplicemente è il contrario di onFocus: quando l'elemento che aveva il focus lo perde (perché l'attenzione dell'utente si è concentrata su altro) viene azionato l'evento onBlur.
È da notare che a uno stesso elemento possono essere attribuiti più eventi. Ad esempio:
<a onmouseover="alert('passaggio sul link');" onmouseout="alert('uscita dal link');" href="pagina.html">testo del link </a>
(Certo l'alert non è l'ideale per far interagire i tre eventi fra loro, ma l'importante è aver compreso il concetto che allo stesso elemento possono essere collegati eventi diversi, ciascuno con il proprio codice da eseguire).
Gli eventi non si esauriscono nella tabella che abbiamo appena visto. Ma quelli visti sono gli eventi più noti e più usati.
Ogni elemento dell'HTML ha a disposizione determinati eventi e non altri. Per esempio, un livello in Internet Explorer 6 è dotato di tutti i seguenti eventi (come si può vedere non c'è l'evento onLoad, né onSubmit, perché riferiti a un livello non avrebbero alcun senso):
onmouseup, oncontextmenu, onrowexit, onbeforepaste, onactivate, onmousemove, onmove, onselectstart, oncontrolselect, onkeypress, oncut, onrowenter, onmousedown, onpaste, onreadystatechange, onbeforedeactivate, onkeydown, onlosecapture, ondrag, ondragstart, oncellchange, onfilterchange, onrowsinserted, ondatasetcomplete, onmousewheel, ondragenter, onblur, onresizeend, onerrorupdate, onbeforecopy, ondblclick, onkeyup, onresizestart, onmouseover, onmouseleave, onmoveend, onresize, ondrop, onpage, onrowsdelete, onfocusout, ondatasetchanged, ondeactivate, onpropertychange, ondragover, onhelp, ondragend, onbeforeeditfocus, onfocus, onscroll, onbeforeactivate, onbeforecut, onclick, oncopy, onfocusin, onbeforeupdate, ondataavailable, onmovestart, onmouseout, onmouseenter, onlayoutcomplete, onafterupdate, ondragleave
NOTA A MARGINE
Chi volesse sapere come ho ricavato tutti gli eventi mensionati sopra, sappia che per ricavarli ho utilizzatoquesto codice JavaScript. È sufficiente inserirlo nel BODY del documento:
<div id="mioLiv" style="position:absolute"></div>
<script type="text/javascript">
for (prop in document.all.mioLiv) {
if (prop.indexOf("on")==0)
document.write(prop+"<br/>");
}
</script>
