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>
Ultimi articoli JavaScript
PhantomJS, headless browser per test con JavascriptIl tool ideale per realizzare, da terminale, operazioni in remoto su... |
Creare e leggere QR Code in JavaScriptApplicazioni 'QR Code enabled' per il Web e per il mobile,... |
Jquery UI Map: web-mapping con Google Maps e jQueryUn plugin di jQuery UI per intefacciare applicaizoni Web/mobile con... |
Scrollorama e Scrolldeck, slideshow d'effetto con jQueryPlugin jQuery per ottenere Slideshow con diversi effetti di scrolling |
jCanvas, un primo semplice graficoAlla scoperta della libreria jCanvas, per semplificare il disegno e... |
Guide JavaScript
Guida Node.jsIl framework che permette di per usare V8, l'interprete JavaScript... |
Canvas, guida ai frameworkCanvas, tra gli elementi di HTML5 è forse quello di maggior impatto.... |
Guida Javascript: tecniche avanzateUna guida dal taglio pratico per approfondire la programmazione a... |
Newsletter @JavaScript
Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso JQuery e Ajax per Webmaster03 Luglio 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |