jQuery04

"jQuery (Parte TERZA)"

8. Gli eventi

Sviluppando applicazioni con jQuery è possibile avviare determinate azioni o mlanciare dei metodi al generarsi di un determinato evento. Gli eventi possibili sono, ovviamente, gli stessi che siamo soliti utilizzare con Javascript (onclick, onmouseover, onload, ecc.) più alcuni che sono resi disponibili dalla stessa libreria.

Al fine di scatenare un'azione al verificarsi di un dato evento è possibile operare in
due modi:
1) attraverso la classica gestione in-line degli eventi all'interno dei singoli elementi coinvoliti,

oppure
2) mediante apposite funzioni al cui interno viene esplicitato il richiamo all'evento.

Ci occuperemo del secondo meccanismo indicato, in quanto permette una maggiore personalizzazione e consente di mantenere uno stile di programmazione più fluido ed ordinato.

bind() e unbind()
Grazie a questo metodo possiamo legare una o più funzioni (dette handlers) ad uno o più eventi.
Nel suo utilizzo più comune il metodo bind() conosce due parametri:
il primo contenenete il riferimento al/agli evento/i,
il secondo la funzione da lanciare.
Facciamo un esempio e supponiamo di voler aprire un alert() al click su un div avente classe .menu:

$('.menu').bind('click', function() {
  alert('Hai fatto un click sopra il menu!');
});

Si noti che questo codice va inserito all'interno del body della pagina dopo l'elemento interessato:

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<div class="menu">
  clicca qui!
</div>

<script type="text/javascript">
$('.menu').bind('click', function() {
  alert('Hai fatto un click sopra il menu!');
});
</script>

</body>
</html>

Come abbiamo detto possiamo passare anche più di un evento semplicemente dividendoli con uno spazio:

$('.menu').bind('click dblclick', function() {
  alert('Stai facendo click o doppio click sopra il menu');
});

Se mediante bind() leghiamo una funzione ad un dato evento, mediante unbind() effettuiamo il percorso inverso "disassociando" l'handler dall'elemento al verificarsi di un dato evento. Vediamo un esempio:

var handler = function() {
  alert('Hai fatto un click sopra il menu!');
};
$('.menu').bind('click', handler); 
// al click lancio l'alert...
$('.menu').unbind('click', handler); 
// ...con un altro click tolgo l'alert

Utilizzando unbind() senza alcun parametro verranno disassociati tutti gli handlers legati all'elemento:

$('.menu').unbind();

lanciare un evento con trigger()
jQuery mette a disposizione anche un metodo (trigger()) per lanciare artificialmente un dato evento. Si supponga, ad esempio, di voler simulare la pressione del click del mouse sopra un dato elemento per il quale era stata prevista l'esecuzione di una data funzione al verificarsi di quel evento:

// utilizzo bind per associare all'evento click una funzione che genera un alert
$('.menu').bind('click', function() {
  alert('Hai fatto un click sopra il menu!');
});

// simulo la pressione del tasto del mouse sul menu
$('.menu').trigger('click');

Una serie di interessanti shortcut...
Oltre a questo metodo "generale" (bind()), jQuery mette a disposizione degli sviluppatori alcuni interessanti shortcut che corrispondo ai classici eventi che siamo abituati ad utilizzare con Javascript. Di seguto un elenco con alcuni di questi metodi:

blur()
focus()
click()
dblclick()
select()
submit()
keypressed()
...

Tutti questi metodi sono delle scorciatoie rispetto alla sintassi di bind(). Vediamo, ad esempio, il metodo click():

$('.menu').click(function() {
  alert('Hai fatto un click sopra il menu!');
});

è equivalente a:

$('.menu').bind('click', function() {
  alert('Hai fatto un click sopra il menu!');
});

Se il metodo click() viene utilizzato senza passare alcun parametro, questo produce l'effetto di simulare il click sull'elemento cui è associato (riproducendo, di fatto, l'effetto del metodo trigger()). In sostanza:

$('.menu').click();

è equivalente a:

$('.menu').trigger('click');

Si noti, tuttavia, che l'utilizzo di queste scorciatoie non offre la duttilità del metodo bind() ne tantomento consente di legare due eventi ad una stessa funzione.

9. I metodi load() e ready()

All'interno della famiglia degli eventi (di cui abbiamo parlato nella precedente lezione) un ruolo di particolare importanza è ricoperto da load() e ready().
Questi due metodi sono molto utilizzati da chi scrive applicazioni in jQuery, in quanto permettono di sfruttare due "momenti importanti" legati al caricamento della pagina.

Il metodo load() consente di eseguire una funzione al momento del completo caricamento di un dato elemento e dei sui figli. Questo metodo risulta molto utile in associazione con l'oggetto window: in questo modo, infatti, è possibile lanciare una funzione all'atto del completo caricamento della pagina (fogli di stile, script e grafica compresa).

$(window).load(function () {
  alert('Finestra caricata completamente, compresa la grafica');
});

Da non confondere con load() è il metodo ready() il quale si rivela, in molte circostanze, più utile del precedente. Di solito, infatti, non c'è bisogno di attendere che tutta la pagina sia completa (per esempio che tutte le immagini siano state caricate), a volte basta solamente che sia pronto il DOM.
A catturare questo evento ci pensa, appunto, il metodo ready(). Per utilizzare questo metodo esistono tre sintassi equivalenti (alle quali se ne aggiunge una quarta, cioè quella con il metodo bind()). La più sintassi utilizzata è la seguente:

$(document).ready(function() {
  alert('DOM caricato'); 
});

In alternativa è possibile usare:

$().ready(function() {
  alert('DOM caricato'); 
});

ma il suo utilizzo è sconsigliato.
Infine è possibile usare questa sintassi ultra-compatta:

$(function() {
  alert('DOM caricato'); 
});

Vediamo, per finire, un esempio di utilizzo di questo metodo:

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
  $("p").text("Il DOM è stato caricato è può essere manipolato!");
});
</script>

</head>
<body>

<p>In attesa di caricamento...</p>

</body>
</html>