Conosciamo già da molto tempo il concetto di evento e di gestore di evento in javascript. Per esempio:
In questo caso l'evento è il clic sull'elemento (l'immagine) col tasto sinistro del mouse. L'evento è legato alla funzione muovi() dal gestore di eventi onclick.
Si dice che l'evento scatena (in inglese si usa il verbo to fire) il codice della funzione, la quale a sua volta cattura (to catch in inglese) l'evento.
In jQuery la gestione degli eventi avviene (come praticamente tutto il resto) all'interno della funzione chiamata al caricamento della pagina: $(document).ready. All'interno di questa funzione il programmatore scrive gli eventi da associare ai diversi elementi della pagina.
Si consideri l'esempio seguente in cui, cliccando sul primo paragrafo, questo viene nascosto dalla pagina:
<html>
<head>
<meta charset="utf-8">
<title> Semplice esempio di gestore di eventi con jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(
function() {
$('#nascondi').click(function() {
$(this).hide();
});
}
);
</script>
</head>
<body>
<p id="nascondi">Se qui sopra cliccherai, questo paragrafo nasconderai</p>
<p>Bla bla bla...</p>
<p>Bla bla bla...</p>
</body>
</html>
Questo codice può apparire terribilmente complesso per il programmatore agli inizi, perciò conviene scomporlo in parti:
Il blocco esterno in rosso rappresenta $(document).ready con le sue parentesi tonde di apertura e chiusura e il punto e virgola finale.
All'interno si trova la funzione anonima racchiusa nel blocco con bordo azzurro.
Infine, ancora all'interno si trova il gestore di eventi vero e proprio (blocco in verde), la cui sintassi è la seguente:
// codice della funzione anonima
}
);
Come si vede l'evento (click nel nostro caso) è associato a una funzione anonima, il cui codice viene scritto subito dopo.
Si noti l'uso della parola chiave this per indicare il proprietario (parent) dell'evento, cioè nel nostro caso l'oggetto #nascondi.
Per un elenco completo degli eventi in jQuery rimandiamo a W3C Schools (dove ci sono anche numerosi esempi di uso). Qui ci limitiamo a notare che gli eventi in jQuery sono sostanzialmente gli stessi usati in javascript (d'altra parte si basano su questi ultimi!), salvo che nel nome non è presente la parola on (per esempio onclick in js diventa click in jQuery, onmouseover diventa semplicemente mouseover e così via).
Osserviamo infine che, usando i gestori di eventi in jQuery, nella pagina html non c'è più alcuna traccia del codice di programma (non c'è più neppure il gestore di eventi stile js, onclick). Questa separazione fra codice e html è una buona pratica di programmazione e conduce a pagine pulite e funzionali.
ATTENZIONE: programmando in jQuery è bene non mescolare gestori di eventi javascript con gestori di eventi jQuery. In realtà sarebbe perfettamente possibile usare gestori di eventi javascript (tipo onclick) per scatenare funzioni contenenti codice jQuery, ma questa pratica di programmazione è sconsigliata e produce confusione.
precedente
Sito realizzato in base al template offerto da
http://www.graphixmania.it
