Metodi speciali e ‘event delegation’

Oltre a .bind() jQuery offre alcuni metodi specifici:

• .one(): funziona come .bind() ma esegue l’handler associato all’evento solo una volta
• .hover(): accetta due funzioni, una per quando il mouse è sopra un elemento ed una per quando lo lascia
• .toggle(): accetta una o più funzioni come argomento, lanciandole in sequenza ad ogni click

Ecco gli esempi.

Una nota particolare riguarda .ready(), che associato a document lancia una funzione quando l’abero del DOM è stato caricato, senza attendere il caricamento di immagini e fogli di stile:

$(document).ready(function () {
		//codice
});

Come già visto nelle prime lezioni, questo metodo può anche essere riscritto come:

$(function () {
		//codice
});

Alcune scorciatoie

E’ quasi inutile ripetere ancora una volta che jQuery ha a cuore la sinteticità del codice. Proprio per questo anche per gli eventi sono disponibili delle scorciatoie come:

$("a").click(function () {
		//codice da associare
});

$("a").click(); //lancia gli handler associati ad a per l'evento click

Per una lista completa delle scorciatoie vi rimando alla documentazione ufficiale.

Event Delegation

Una delle novità introdotte con la versione 1.3 è il supporto nativo per l’event delegation. Con questo termine ci si riferisce alla possibilità di associare un handler ad un evento anche per elementi non ancora presenti nel documento. Infatti, quando utilizziamo .bind() su una collezione di elementi, l’handler non viene associato ai nuovi elementi aggiunti dinamicamente, ma solo a quelli già esistenti.
Il metodo specifico per l’event delegation è .live(), con il corrispettivi .die() per cancellare l’associazione. Al momento sono presenti alcune limitazioni:

• è possibile associare solo un evento alla volta e solo un sottogruppo degli eventi disponibili con .bind()
• .live() si applica solo direttamente ad un selettore (non è possibile associarlo dopo aver filtrato o attraversato la collezione)

Un esempio tipico dell’utilizzo di questo metodo è:

$("#lista li").live("click",function () {
		//codice da eseguire
});