Sviluppando applicazioni con jQuery è possibile avviare determinate azioni o lanciare 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 potenziare le possibilità offerte nativamente dal linguaggio.
Al fine di scatenare un’azione al verificarsi di un dato evento è possibile operare in due modi:
- attraverso la classica gestione in-line degli eventi all’interno dei singoli elementi coinvoliti (utilizzando i classici attributi Javascript dei tag HTML);
- mediante appositi metodi jQuery che, associati agli elementi coinvolti, associano un dato evento all’azione da eseguirsi.
In questa sede 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()
NOTA: Fino alla versione 1.7 di jQuery i due metodi fondamentali nella gestione degli eventi erano .bind() e .unbind(). Oggi questi metodi sono stati sostituiti da .on() e .off(), tuttavia la loro trattazione viene affrontata ugualmente perchè sono ancora largamente diffusi ed utilizzati.
Grazie al metodo .bind() 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, in questo modo:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="menu">
clicca qui!
</div>
<script>
$('.menu').bind('click', function() {
alert('Hai fatto un click sopra il menu!');
});
</script>
</body>
</html>In alternativa dobbiamo ricordarci di inserire il nostro codice all’interno di $(document).ready() in questo modo:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
$('.menu').bind('click', function() {
alert('Hai fatto un click sopra il menu!');
});
);
</script>
</head>
<body>
<div class="menu">
clicca qui!
</div>
</body>
</html>Su questo punto torneremo nella prossima lezione della nostra guida quando affronteremo nello specifico il metodo .ready().
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 ad un oggetto una funzione da scatenarsi al verificarsi di una 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'alertUtilizzando unbind() senza alcun parametro verranno disassociati tutti gli handlers legati all’elemento:
$('.menu').unbind();.on() e .off()
A partire dalla versione 1.7 di jQuery, come già detto, sono stati introdotti i metodi .on() e .off i quali corrispondono, nelle funzionalità, ai metodi visti poco sopra (.bind() e .unbind()) i quali sono da considerarsi superati e quindi non più da utilizzare all’interno di nuovi progetti. Tornando all’esempio precedente, possiamo riscriverlo in questo modo:
var handler = function() {
alert('Hai fatto un click sopra il menu!');
};
$('.menu').on('click', handler); // al click lancio l'alert...
$('.menu').off('click', handler); // ...con un altro click tolgo l'alertA differenza di .bind(), il metodo .on() consente di specificare (all’interno degli argomenti) un elemenento, discendente del selettore, da utilizzare quale filtro nel triggering dell’evento. Tale peculiarità si rivelerà molto importante nella event delegation di cui parleremo in una delle prossime lezioni.
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:
$('.menu').on('click', function() {
alert('Hai fatto un click sopra il menu!');
});
// simulo la pressione del tasto del mouse sul menu
$('.menu').trigger('click');Così facendo, in pratica, è lo sviluppatore a decidere che un dato evento debba verificarsi in un determinato momento, a prescindere dall’azione diretta dell’utente.
Una serie di interessanti shortcut…
Oltre al metodo "generale" .on() (che ha sostituito .bind()), jQuery mette a disposizione degli sviluppatori alcuni interessanti shortcut che consentono di raggiungere lo stesso risultato che avremmo utilizzando la sintassi estesa di .on() scrivendo ancora meno codice. Questi metodi, in pratica, 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, come abbiamo detto, sono delle semplici scorciatoie rispetto alla sintassi di .on(). Vediamo, ad esempio, il metodo click() che abbiamo già incontrato diverse volte nel corso di questa lezione:
$('.menu').click(function() {
alert('Hai fatto un click sopra il menu!');
});è equivalente a:
$('.menu').on('click', function() {
alert('Hai fatto un click sopra il menu!');
});Se il metodo click() viene utilizzato senza passare una funzione di callback, 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 .on() ne tantomento consente di legare due eventi ad una stessa funzione. In taluni casi, pertanto, utilizzare il metodo .on() può essere la scelta migliore.
Metodi particolari: .one() e .hover()
Oltre ai metodi già presentati, jQuery ne offre alcuni che possiamo considerare "particolari" in quanto presentano caratteristiche peculiari. Questi metodi sono:
- .one() – funziona esattamente come .on() con una sola eccezione: l’evento associato verrà "intercettato" una sola volta; questo metodo è utile quando una determinata azione deve essere eseguita una volta soltanto;
- .hover() – consente di specificare all’interno di un unico metodo due funzioni: una per quanto il cursore del mouse entra nell’elemento (mouseenter) ed una per quando esce (mouseleave);
Vediamo alcuni esempi:
// Esempio di .one()
$('.menu').one('click',function() {
// codice da eseguire solo una volta
});
// Esempio di .hover()
$('.menu').hover(
function() {
// codice da eseguire all'ingresso del mouse
},
function() {
// codice da eseguire quando il mouse esce dall'elemento
};
);Altri metodi che possiamo considerare particolari sono .load() e .ready() e saranno oggetto della prossima lezione della nostra guida.
