Innanzitutto occorre fare una premessa: nel decidere l'ordine degli argomenti da trattare ero abbastanza indeciso in quale posizione porre questa lezione, e quelle ad essa collegate, in quanto in alcuni testi gli eventi sono trattati prima delle funzioni, mentre in altri dopo. La scelta non era indifferente perché l'argomento compone una parte abbastanza corposa della teoria Javascript e, se posto in una posizione sbagliata, rischia di rompere la sequenzialità della trattazione, ma poi ho optato per la posizione attuale in quanto l'argomento è molto affine alla trattazione degli Script in generale, ma sono cosciente di rischiare di rendermi poco comprensibile ai neofiti, per cui vogliano questi apprendere le successive lezioni dando per scontato alcune affermazioni, soprattutto sulle funzioni e affrontando alcuni esempi focalizzando particolarmente l'attenzione sull'uso degli handler.
Gli eventi sono utilizzati per richiamare delle istruzioni. Infatti lo script va eseguito in maniera sequenziale, ma per fare in modo da inserire la dinamicità e l'interattività occorre che questo resti caricato in memoria e venga attivato o richiamato solo quando si verificano particolari situazioni come il passaggio del mouse, il caricamento di un documento, ecc. Il problema della conciliazione con le funzioni sta nel fatto che ad un evento può essere associata una sola istruzione, ma il più delle volte l'associazione è fatta con un blocco di istruzioni e, quindi, con le funzioni che prendono il nome di handler o gestori di eventi.
Gli eventi, per poter interfacciare HTML con Javascript, non vengono definiti nel tag <script> (tranne che in qualche caso), ma sono inseriti all'interno dei tag <html>: il browser compatibile con Javascript incontrando un evento lo interpreta e lo attiva.
Ecco un esempio:
<A href="pagina.html" onclick="alert('ciao')">Link</A>
notiamo come l'evento onClick sia inserito nel Tag come se fosse uno specificatore dello stesso.
È importante capire questo concetto perché Javascript agli inizi aveva pochi eventi ed erano attivabili solo se inseriti in particolari tag e capita spesso di utilizzare gli handler in maniera arbitraria e di considerare come errore la mancata attivazione di un evento quando inserito in tag incompatibili.
Internet Explorer nelle ultimissime versioni ha allargato le possibilità di utilizzo degli eventi, per cui possono essere inseriti in tantissimi tag, mentre Netscape è rimasto fedele alle originarie impostazioni. Questopotrebbe essere un bene o un male, ma per esperienza preferisco la strategia di Netscape in quanto gli eventi potrebbero andare in conflitto e, se onnipresenti, potrebbero diventare incontrollabili.
Attivare gli eventi all'interno degli script
Gli eventi, tuttavia, si possono anche attivare direttamente all'interno degli Script, richiamabili come se fossero una proprietà dell'oggetto. La sintassi è:
Oggetto.evento=handler;
Per chiarire questo concetto che è utilissimo, ma raramente vedo applicato, posso raccontare un aneddoto: agli inizi del mio uso con Javascript cercavo uno script che mi consentisse di simulare lo streaming, cioè di caricare dalla rete un'immagine di una sequenza solo quando ero sicuro che quella precedente era già stata caricata e quindi visualizzata.
Usare un temporizzatore era impossibile perché l'effetto variava secondo la velocità di connessione. Da un ottimo testo di Javascript, trovai un trafiletto che mi offrì lo spunto. In tal modo creai un array di immagini e operavo con il comando:
document.images[num].onload=carica();
dove la funzione carica() serviva a caricare l'immagine successiva. Tutto funzionava alla perfezione, anche se con qualche piccola variazione secondo i browser.
Con Explorer, invece, si può utilizzare uno Script apposito per un oggetto e per un evento tramite la sintassi:
<SCRIPT FOR=Object EVENT=evento>....</SCRIPT>
Raggruppare gli eventi
Negli ultimi tempi gli eventi si sono moltiplicati e difficile è tenerne traccia, quindi, per facilità cerchiamo di raggrupparli in sezioni omogenee:
- Eventi attivabili dai tasti del mouse
- Eventi attivabili dai movimenti del mouse
- Eventi attivabili dal trascinamento del mouse (drag and drop)
- Eventi attivabili dall'utente con la tastiera
- Eventi attivabili dalle modifiche dell'utente
- Eventi legati al "fuoco"
- Eventi attivabili dal caricamento degli oggetti
- Eventi attivabili dai movimenti delle finestre
- Eventi legati a particolari bottoni
- Altri e nuovi tipi di eventi
Nei primi due gruppi sono inseriti quegli eventi tipici del mouse o della tastiera, come il movimento o la pressione, negli altri sono inseriti gli eventi strettamente correlati agli oggetti. Il raggruppamento si richiede perché in tante trattazioni gli eventi sono descritti singolarmente è cio, anche se avvantaggia l'analisi, sgretola la sintesi: che invece è utilissima nelle situazioni più intricate.
Prima della descrizione anticipiamo che tutti gli eventi hanno la propria sintassi composta sintatticamente dal loro nome col prefisso on, ad esempio l'evento click è richiamato con l'handler onclick. Io darò una sintassi fatta di maiuscole e minuscole per evidenziare bene l'evento, ma occorre tener presente che in Netscape 3.0 l'evento è parte di javascript per cui deve essere scritto tutto in minuscolo.
Ultimi articoli JavaScript
Kendo UI, un'alternativa a jQuery UISviluppare applicazioni desktop e mobile sfruttando jQuery e HTML5 e... |
Javascript MVC, realizzare la prima applicazioneSviluppare applicazioni scalabili con il framework JavaScript MVC |
Ottimizzare le Performance di jQuery: cache e concatenazioneRendere il codice jQuery più performante minimizzando le ricerche di... |
Dojo Toolkit, il framework JavaScript per il MobileCome sviluppare applicazioni mobile per iOS, Android e Blackberry... |
jQuery: messaggi di notifica con dNotifyUn plugin per jQuery che aggiunge un sistema unobtrusive di... |
Guide JavaScript
Canvas, guida praticaCanvas, tra gli elementi di HTML5 è forse quello di maggior impatto.... |
Guida jQuery UICreare siti ricchi e dinamici con jQuery UI, il progetto ufficiale... |
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 Google AdWords Base27 Febbraio 2012 a Milano |
|
|
Corso Webmaster base12 Marzo 2012 a Milano |
|
|
Corso JQuery e Ajax per Webmaster19 Marzo 2012 a Milano |
|
|
Corso Webmaster base20 Febbraio 2012 a Roma |
|
|
Corso Google AdWords Base28 Marzo 2012 a Roma |