Uno dei punti forti della nuova versione di jQuery (la 1.7), pubblicato un paio di settimane fa’, sono le funzioni .on() e .off(), che mirano a unificare i diversi metodi che avevamo a disposizione per assegnare e rilasciare i gestori di eventi:.bind(), .unbind(), .delegate(), .undelegate(), .live() e .die().

Usando jQuery .on() e .off()

Si dovrebbe usare da ora in poi questi nuovi paia di metodi, non solo perché semplificano l’API, ma perché è probabile che per le future versioni le altre funzioni scompariranno. Tanto, che se guardiamo il codice della nuova versione, vediamo che l’implementazione dei metodi antichi sono stati sostituiti dalle semplici chiamate .on() e .off().
I nuovi metodi hanno la seguente sintassi:
$(elements).on(events [, selector] [, data], handler);
$(elements).off(events [, selector], handler);
Se non passiamo nessun selettore come parametro a .on() è simile a .bind(), dove è sufficiente associare al gestore a degli elementi. Questo è anche quello che fanno .click(), .hover(), .change(), .submit() e altre abbreviazioni.
$('tr').on('click', evidenziare);
$('tr').bind('click', evidenziare);
Quando un selettore viene passato come parametro, è simile a .delegate(), dove viene aggiunto il gestore agli elementi, ma ciò che vediamo è se l’evento si è verificato nei discendenti filtrato con il selettore. Quando l’evento si verifica, controlla ognuno degli antenati nel DOM fino che non trova quello con il gestore appropriato. Il trattamento della gestione è poi delegata all’antenato, quindi il loro nome. Questo può essere utile, ad esempio, se abbiamo migliaia di righe: si può associare il gestore alla tabella, invece di dover fare su ognuno delle loro righe, che può essere estremamente lento.
$('table').on('click', 'tr', evidenziare);
$('table').delegate('click', 'tr', evidenziare);
L’utilizzo di .live(), che è simile al .delegate(), e anche se si utilizza document come root non è raccomandato, perché l’evento dovrebbe percorrere tutti gli antenati fino a document per trovare il gestore corretto, il che la rende molto più lenta quando la nostra gerarchia è molto profonda. E anche così , se vogliamo, la possiamo imitare:
$(document).on('click', 'tr', evidenziare);
$('tr').live('click', evidenziare);
Similari
Disabilitare il tasto destro del mouse facilmente utilizzando jQuery
12% JQuery
Ho letto diversi messaggi sui forum con richieste su come disabilitare l’evento del tasto destro del mouse in JavaScript. Beh, la soluzione è piuttosto semplice se si usa jQuery! Il trucco è quello di legare (to bind) l’ev…
Cos’è this?
12% JQuery
Uno degli aspetti più confusi di jQuery è come assegna l’ambito durante il callback. Deve essere parecchio confuso perché l’argomento genera un sacco di domande sulla mailing list di jQuery. Peccato, davvero, perché jQuery…
La bellezza del Metodo each() di jQuery
9% JQuery
La libreria jQuery fornisce un metodo, each(), che cicla ogni elemento dell’oggetto jQuery di destinazione. [expand expanded=”true” title=”Ciclare tutti i link” excerpt=”⤽” swapexcerpt=”” startwrap=”” endwrap=”” trigclass=…
Utilizzando il metodo data() di jQuery
8% JQuery
Ad un certo punto, tutti noi dobbiamo memorizzare qualche set di dati sul client. Possiamo memorizzare lo spazio dei nomi di variabili sempre in maggiore quantità evitando collisioni; possiamo memorizzare le variabili in q…
Migliorare le prestazioni con jQuery
8% JQuery
Ero a caccia di trucchi per ottimizzare le prestazioni di jQuery che uso in una mia pesante applicazione web dinamica. Dopo aver scavato in un sacco di articoli ho deciso di fare una lista con i migliori suggerimenti e uti…