JavaScript: mini tutorial sui gestori di eventi
JavaScript : mini tutorial sui gestori di eventi (versione 2.0)
Dopo il malaugurato disastro in cui anche questa guida e' andata perduta, la riscrivo, approfittandone anche per apportarvi alcuni miglioramenti.
Per prima cosa cerchiamo di definire (cosa non proprio semplice) cos'e' un
evento: lo possiamo definire come un comportamento dell'utente monitorabile dal browser, come ad esempio il passaggio del mouse in una determinata area della pagina o la selezione di un elemento di un modulo. In JavaScript, quindi, un
gestore di eventi e' una modalita' per intercettare questi eventi ed eseguire delle routine particolari in risposta ad essi.
Spiegata cosi', la cosa e' molto generica, quindi sara' meglio illustrare il tutto con degli esempi qui di seguito.
Per iniziare: come specificare una risposta ad un evento
Per scrivere un gestore di evento, ci sono vari modi:
- il primo consiste nel dichiarare una funzione JavaScript e poi di assegnarla all'interno dello stesso script nel modo seguente:
function carica ()
{
...
}
window.onload = carica;
e' un metodo poco utilizzato perche' non cosi' immediato e perche' supporta pochi tipi di evento, ma ha il vantaggio che, copiando il codice precedente in un file separato, e' possibile includerlo uguale in varie pagine semplicemente collegando un file di script
- il secondo metodo usa un approccio opposto al precedente: si specifica cii' che deve essere fatto in risposta all'evento direttamente sull'elemento corrispondente, ad esempio:
<img src="..." alt="..." onclick="alert('Hello, World!')" />
- il terzo metodo e' una via di mezzo tra i due precedenti ed e' quello piu' utilizzato: si crea una funzione separata dal corpo della pagina (volendo, anche in un file JavaScript esterno) e poi si richiama questa funzione in risposta ad un evento. Ecco un esempio:
function trim_spaces (text)
{
...
return ...
}
...
<input type="text" name="..." onblur="this.value=trim_spaces(this.value)" />
Eventi di caricamento e distruzione
Iniziamo adesso a passare in rassegna i principali gestori di eventi:
- onload corrisponde al completo caricamento di un oggetto (di solito un'immagine o l'intera pagina)
- onunload corrisponde alla distruzione di un oggetto (di solito l'intera pagina).
Ecco, ad esempio, come potete realizzare una semplice accoppiata di saluti con gli alert di JavaScript (per inciso: di norma sono piuttosto fastidiosi. Quindi cercate di valutarne l'aspetto didattico piuttosto che trovarvi un'idea da copiare):
<body onload="alert('Benvenuto sul mio sito!')" onunload="alert('Torna presto a visitarmi!')">
...
</body>
Eventi riguardanti passaggio e clic del mouse
Con il mouse ci si pui' sbizzarrire, ci sono tante cose gestibili in questo senso soprattutto per quanto riguarda le immagini. Ecco le principali:
- onmouseover viene invocato all'entrata del mouse sopra ad un oggetto
- onmouseout all'uscita del mouse da un oggetto
- onmousedown viene invocato alla pressione prolungata del pulsante del mouse su un oggetto
- onmouseup e' invocato al rilascio del mouse dopo onmousedown
- onclick viene invocato con un click del mouse su un oggetto
- ondblclick viene invocato con un doppio click del mouse su un oggetto
A titolo di esempio, il "classico" rollover di immagini con un qualcosa in piu':
<a href="...">
<img src="off.jpg" onmouseover="this.src='on.jpg'" onmouseout="this.src='off.jpg'" onmousedown="this.src='push.jpg'" onmouseup="this.src='off.jpg'" />
</a>
Eventi di puntamento ad oggetti di modulo
Avete mai pensato a come su certi siti sia possibile che JavaScript verifichi all'istante i valori dei campi di un modulo? Probabilmente attraverso uno di questi gestori di evento:
- onfocus invocato quando l'oggetto viene puntato dal mouse o dalla tastiera (dal tasto TAB per capirci)
- onblur invocato quando l'oggetto non e' piu' puntato dal mouse (ovvero, quando si da' il focus ad un altro oggetto)
- onchange quando il valore di un campo di testo viene modificato
- onsubmit invocato subito prima dell'invio di un modulo al server
Un esempio con onblur e' gia' stato illustrato sopra: immaginate che la funzione trim_spaces() sia un algoritmo che elimini gli spazi bianchi iniziali e finali di una stringa. Come in parte detto, peri', con JavaScript potete anche verificare i dati un modulo prima di inviarlo al server, ecco come:
function check_form ()
{
if (...) // condizione non valida
return false
if (...) // altra condizione non valida
return false
// tutto a posto? allora convalida
return true
}
...
<form name="..." action="..." method="..." onsubmit="return check_form()">
...
</form>
Eventi relativi alla tastiera
Infine, due chicche che vi consentono di monitorare la pressione dei tasti della tastiera:
- onkeydown invocato alla pressione di un tasto
- onkeyup invocato al rilascio di un tasto
Volete realizzare un convertitore di valute in tempo reale? Niente di piu' semplice:
<input type="text" id="lire" onkeydown="document.getElementById('euro').value=parseFloat(this.value)/1936.27" />
<input type="text" id="euro" onkeydown="document.getElementById('lire').value=parseFloat(this.value)*1936.27" />
e' tutto. Spero che questa mini guida possa risultarvi utile, in qualche modo. Per eventuali commenti o imprecazioni (notare lo slogan storico del mio sito... :-D), questo topic e' a vostra disposizione.
Statemi bene...
01-08-2007, 23:14
