Suggerimento rapido Delega eventi JavaScript in 4 minuti

La delega degli eventi può essere un argomento confuso per coloro che non hanno familiarità con il concetto. Ma, per fortuna, è davvero semplice. In questo video tutorial di punta veloce, dimostrerò il concetto in poco meno di quattro minuti.

Inserisci la delegazione degli eventi

Invece, con la delega degli eventi, aggiungiamo semplicemente un singolo listener di eventi a un elemento antenato, forse qualcosa come un "ul". Quindi, quando l'utente fa clic su uno dei suoi elementi figli, come un tag di ancoraggio, controlliamo solo se l'obiettivo del clic era, in realtà, un tag di ancoraggio. Se lo era, procediamo normalmente.

$ ('ul'). click (function (e) if ($ (e.target) .is ('a')) alert ('cliccato'););

vantaggi

• Allega solo un listener di eventi alla pagina, anziché cinquecento (nel nostro esempio)
• Gli elementi creati dinamicamente saranno comunque associati al gestore di eventi.

Perché funziona??

Funziona a causa del modo in cui gli elementi vengono catturati (non IE) e si gonfiano. Ad esempio, considera la seguente struttura semplice.

 
Ancora
 

Quando fai clic sul tag di ancoraggio, fai clic su "li" e su "ul" e persino sull'elemento "body". Questo si chiama bubbling up.

Note su questo Screencast

Si prega di tenere presente che questo è solo un semplice esempio per spiegare la funzionalità. Abbiamo usato jQuery, solo perché avevo quattro minuti per registrare! In questo particolare esempio (guarda prima lo screencast), avremmo potuto utilizzare due opzioni alternative:

1. Passa true come parametro del metodo clone (). Ciò clonerebbe quindi l'elemento, così come tutti i gestori di eventi.
2. Usa invece il metodo live (). Tuttavia, fai attenzione quando usi questo metodo: ricollega il gestore di eventi X volte. Questo potrebbe non essere necessariamente necessario.

Per lo più, questo era destinato a dimostrare l'idea. Con JavaScript normale, puoi fare qualcosa come:

// Ottieni un elenco non ordinato contenente tag di ancoraggio var ul = document.getElementById ('items'); // Gestore di eventi cross-browser semplice e veloce - per compensare la funzione addEvent di addEvent di IE addEvent (obj, evt, fn, capture) if (window.attachEvent) obj.attachEvent ("on" + evt, fn);  else if (! capture) capture = false; // capture obj.addEventListener (evt, fn, capture) // Controlla se il nodo su cui è stato fatto clic è un tag di ancoraggio. Se è così, procedi come al solito. addEvent (ul, "click", function (e) // Firefox e IE accedono rispettivamente all'elemento target .e.target e event.srcElement var target = e? e.target: window.event.srcElement; if (target.nodeName.toLowerCase () === 'a') alert ("cliccato"); return false;);

• Seguici su Twitter o iscriviti al feed Nettuts + RSS per i migliori tutorial di sviluppo web sul web.