- Learn
- Guida jQuery
- Metodi speciali e ‘event delegation’
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
});
Se vuoi aggiornamenti su Metodi speciali e 'event delegation' inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Applicare texture ad immagini con Photoshop
In questo video è mostrato come aggiungere effetti ad un’immagine in modo che sembri parte di un tessuto, un muro […]