Ecco il mio primo post sul blog… niente di nuovo, questo tutorial sui gestori di evento in JavaScript era già apparso sul forum di Punto Web… ma ripubblicato sul blog splende di una nuova luce, non trovate? A proposito, mi scuso per eventuali errori di formattazione, ma devo ancora prendere MOLTA confidenza con l’editor di WordPress…

Finito il dovuto preambolo, iniziamo… 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:


function carica ()
{
…
}

window.onload = carica;

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

<img src="..." alt="..." onclick="alert('Hello, World!')" />

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

function trim_spaces (text)
{
…
return …
}

…

<input type=”text” name=”…” onblur=”this.value=trim_spaces(this.value)” />

Nella seconda parte dell’articolo, passeremo in rassegna i principali gestori di evento e le rispettive funzioni.

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

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

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 più 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″ />

È tutto. Spero che questa mini guida possa risultarvi utile, in qualche modo. Per eventuali commenti o imprecazioni, i commenti del blog e il topic originale del forum sono a vostra disposizione.

Statemi bene…