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 è andata perduta, la riscrivo, approfittandone anche per apportarvi alcuni miglioramenti.

Per prima cosa cerchiamo di definire (cosa non proprio semplice) cos'è 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 è una modalità per intercettare questi eventi ed eseguire delle routine particolari in risposta ad essi.
Spiegata così, la cosa è molto generica, quindi sarà 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:

è un metodo poco utilizzato perché non così immediato e perché supporta pochi tipi di evento, ma ha il vantaggio che, copiando il codice precedente in un file separato, è possibile includerlo uguale in varie pagine semplicemente collegando un file di script
- il secondo metodo usa un approccio opposto al precedente: si specifica ciò che deve essere fatto in risposta all'evento direttamente sull'elemento corrispondente, ad esempio:

- il terzo metodo è una via di mezzo tra i due precedenti ed è quello più 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:

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):

Eventi riguardanti passaggio e clic del mouse
Con il mouse ci si può 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 è 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 più:

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 è più puntato dal mouse (ovvero, quando si dà 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 è già 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, però, con JavaScript potete anche verificare i dati un modulo prima di inviarlo al server, ecco come:

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 più semplice:

È 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 è a vostra disposizione.

Statemi bene...

---

RE: JavaScript: mini tutorial sui gestori di eventi

---

Al momento ho dato soltanto una veloce lettura... affermo di essere ignorante a livelli medi su javascript in quanto piu o meno comprendo ma non realizzo da zero...

In ogni caso io realizzere + esempi, magari anche già disponibili a vedersi sul web..