Eventi in JavaScript
Windows e tutti i moderni sistemi operativi sono in grado di segnalare alle applicazioni in esecuzione il verificarsi di un determinato evento. Ma cos'è un evento?
Gli eventi sono il mezzo utilizzato dagli oggetti per segnalare all'applicazione di cui fanno parte il verificarsi di una determinata situazione.
Un evento è un messaggio1 che il sistema genera in risposta a un’azione effettuata dall’utente, quando interagisce con l’applicazione, o dal sistema stesso.
Può avvenire, pertanto, a seguito di un'interazione con l'utente (pressione di un tasto, compilazione di una casella di testo, ...), o di un cambiamento di stato del componente che ha generato l'evento (creazione, inizializzazione, completamento del caricamento, ...).
Praticamente ad ogni applicazione vengono segnalati, durante la sua esecuzione, centinaia di eventi.
I nomi degli eventi generalmente ne rispecchiano la natura.
Ad esempio, il nome dell'evento che gestisce la pressione del tasto del mouse (in realtà il gestore dell’evento) è onClick; l'evento (il gestore dell’evento) che segnala l'avvenuto caricamento di un oggetto prende il nome di onLoad e cosi via.
Le applicazioni JavaScript offrono la possibilità di gestire gli eventi che riguardano la finestra del browser ed il documento caricato.
Gestire un evento vuol dire collegare ad esso una funzione in modo che questa venga eseguita quando e se quel determinato evento dovesse verificarsi.
Gli eventi, in JavaScript, vengono sempre generati da un oggetto, quindi sarà sufficiente inserire un ulteriore parametro nel TAG di definizione dell'oggetto in questione.
Questo parametro conterrà il nome dell'evento che vogliamo gestire ed il nome della funzione che desideriamo collegarvi.
Ad esempio, si può gestire l'evento "ingresso del puntatore del mouse nell'area dell'oggetto" di un oggetto di tipo immagine.
<IMG SRC="img1.gif" onMouseOver="funzione1()">
In questo modo, quando l'utente muoverà il puntatore del mouse sull'area occupata dall'immagine img1.gif verrà richiamata la funzione funzione1(). Definiamo funzione1() nel seguente modo:
function funzione1() {
alert("Sei sull'immagine img1.gif");
}
1 In alcuni ambienti visuali (come Toolbook) viene usata una terminologia differente. Si dice infatti che l’evento ('azione' o occorrenza dell’evento) "click del mouse" su un oggetto genera i messaggi ('eventi') "buttonDown, buttonUp, buttonClick", nell’ordine.
Gestione di eventi in Javascript
L’occorrenza di un evento può essere definita come l’ azione che si manifesta, di solito, successivamente ad operazioni dell'utente, come la pressione del mouse, il passaggio da una finestra a un'altra o il cambio di focus. Prima di proseguire cerchiamo di chiarire meglio cosa si intende per focus nel mondo dell'informatica.
Il focus rappresenta l'oggetto che in quel preciso istante detiene l'attenzione, il controllo da parte del programma o del sistema operativo, o meglio, è in esecuzione rispetto a tutti gli altri.
Un esempio di cambio di focus manuale avviene quando, utilizzando un sistema operativo come Windows di Microsoft, si decide di passare da un programma all'altro utilizzando la barra delle applicazioni. In realtà tutti i programmi presenti stanno funzionando, ma la nostra attenzione è rivolta al software in primo piano e se decidiamo di utilizzarne un altro, nel momento in cui premiamo il relativo pulsante, sullo schermo viene visualizzata la sua interfaccia. Il focus passa quindi dal programma in primo piano al successivo da noi scelto.
Passiamo ora ad analizzare una pagina Web costituita da vari oggetti, come pulsanti, celle d'inserimento dati, elenchi di scelta, immagini e altro. L'utente esegue l'operazione all'interno della pagina, passando con il mouse o con la tastiera da un oggetto all'altro, spostando quindi il focus da un oggetto all'altro. Se provate a caricare una pagina con più oggetti e premete il tasto di tabulazione, potete vedere il cursore che si sposta da un oggetto all'altro. In effetti, se premete il tasto Invio quando è evidenziato un pulsante, verrà eseguita l'operazione ad esso collegata. Il focus può anche essere gestito con gli script mediante proprietà e metodi.
Chiarito il significato di focus, anche la definizione di occorrenza di un evento viene semplificata:
è l'azione che l'utente esegue sull'oggetto proprietario del focus (un pulsante, un'immagine o un radio button).
Un passo successivo: per ogni evento (event) esiste un gestore degli eventi (event handler) paragonabile a un puntatore che descrive l'evento stesso. Utilizzando il gestore degli eventi è possibile scrivere gli script per eseguire le operazioni quando l'utente scatena l'evento. Ad esempio, è possibile controllare la coerenza dei dati inseriti in un form quando l'utente preme il tasto di invio.
La parola chiave che rappresenta un gestore di eventi è costituita dal prefisso "on" e dal nome dell'evento stesso: all'evento Click corrisponde il gestore onClick.
Tutti gli event handler (gestori di eventi) hanno almeno due proprietà:
1. type: indica il tipo di evento
2. target: indica l'oggetto al quale l'evento era inviato
Per analizzare meglio gli eventi proviamo a suddividerli in sei categorie, riguardanti i diversi campi di utilizzo:
Tipo Evento Gestore
Errori Abort
Error onAbort
onError
Testi Change
Select onChange
onSelect
Tasti KeyDown
KeyPress KeyUp
onKeyDown onKeyPress onKeyUp
Mouse MouseDown
MouseMove MouseOut MouseOver MouseUp
onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp
Form Click
DblClick Reset Submit
onClick onDblClick onReset onSubmit
Window e frame Blur
DragDrop Focus Load Move Resize Unload
onBlur onDragDrop onFocus onLoad onMove onResize onUnload
Se un oggetto è in grado di generare un determinato evento, è possibile definire per esso un appropriato gestore degli eventi.
La sintassi generale per far ciò è la seguente: <TAG gestoreEvento=”Codice JavaScript”>
dove TAG è un tag HTML e gestoreEvento è il nome come appare nell’ultima colonna della tabella precedente.
Ad esempio se abbiamo creato una funzione compute che opera sui dati di una form, possiamo far si che essa venga richiamata ogni volta che si preme il pulsante di nome Calculate col comando:
<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">
La parola chiave this si riferisce all’oggetto corrente, ovvero il pulsante e this.form punta alla form dove il pulsante è posizionato.
In genere si possono inserire più comandi JavaScript come gestore degli eventi, separando gli stessi con punti e virgola ma conviene utilizzare delle funzioni come gestori degli eventi, in quanto ciò rende il codice più leggibile e modulare ed è bene porre le definizioni di funzioni nella parte
<HEAD> di un documento in modo che vengano definite all’inizio del caricamento di una pagina, altrimenti l’utente potrebbe eseguire un’azione che porta all’esecuzione di un gestore di eventi che chiama una funzione indefinita, causando un errore.
Ogni evento è generato da un certo tipo di oggetto HTML a seconda di una determinata azione:
Evento Oggetto relativo Avviene quando Gestore
dell’evento
abort Immagini L’utente interrompe il
caricamento di una immagine
OnAbort blur Finestre, frame e tutti gli
elementi delle form L’utente rimuove il fuoco dall’oggetto
OnBlur Click Pulsanti submit e reset,
radio button, checkbox, collegamenti
L’utente clicca sull’oggetto OnClick
Change Campi testo, area testo e
liste di selezione L’utente cambio il valore dell’elemento
OnChange Error Immagini, finestre Il caricamento di un documento o
di una immagine causa un errore
OnError Focus Finestre, frame e tutti gli
elementi delle form
L’utente porta il fuoco sull’oggetto
OnFocus
Load Documento L’utente carica la pagina OnLoad
Mouseout Immagine attiva, collegamenti
L’utente sposa il mouse fuori dall’oggetto
OnMouseout Mouseover Collegamenti L’utente muove il mouse su un
collegamento
OnMouseover
Reset Form L’utente preme il pulsante di reset
di una form OnReset
Select Campi testo, area testo L’utente seleziona del testo dall’oggetto
OnSelect Submit Pulsante submit L’utente preme il pulsante submit OnSubmit
Unload Documento L’utente esce da una pagina OnUnload
Per un elenco di tutti gli eventi disponibili … Appunti su JavaScript Gli Eventi disponibili Per approfondire (versioni e compatibilità)
Per esercizi con gestione di eventi
Per ricordare le modalità per eseguire JavaScript
