Snabbtips JavaScript-evenemangsdelegation om 4 minuter

Evenemangsdelegation kan vara ett förvirrande ämne för dem som inte känner till konceptet. Men lyckligtvis är det verkligen enkelt. I den här snabba videotutorialen demonstrerar jag konceptet på knappt fyra minuter.

Ange händelsedelegering

Istället, med händelseöverföring, lägger vi helt enkelt till en enda händelselistor till ett förfaderelement, kanske något som en "ul." Då, när användaren klickar på ett av dess barnelement, som en ankare, kontrollerar vi bara för att se om målet för klicket faktiskt var en ankaremärke. Om det var, fortsätter vi per vanligt.

$ ('ul'). klicka (funktion (e) om ($ (e.target) .is ('a')) alert ('clicked'););

fördelar

• Fäst bara en händelselyssnare på sidan, snarare än femhundra (i vårt exempel)
• Dynamiskt skapade element är fortfarande bundna till händelsehanteraren.

Varför fungerar det här?

Det fungerar på grund av det sätt som elementen fångas (inte IE) och bubbla upp. Tänk på följande enkla struktur.

 
Ankare
 

När du klickar på ankaretiketten klickar du också på "li" och "ul" och till och med elementet "kropp". Detta kallas bubbling up.

Anteckningar om denna skärmdump

Tänk på att detta bara är ett enkelt exempel för att förklara funktionaliteten. Vi använde jQuery, bara för att jag hade fyra minuter att spela in! I det speciella exemplet (titta på skärmbilden först) kunde vi ha använt två alternativ:

1. Passera sant som en parameter för klon () -metoden. Detta skulle då klona elementet, liksom eventuella händelsehanterare.
2. Använd istället live () -metoden. Var försiktig när du använder den här metoden: den återställer händelsehanteraren X gånger. Det behövs inte nödvändigtvis.

För det mesta var detta avsett att visa idén. Med vanlig JavaScript kan du göra något som:

// Hämta någon oorderad lista, som innehåller ankarkoder var ul = document.getElementById ('items'); // Snabb och enkel händelsehanterare för webbläsare - för att kompensera för IE: s attachEvent-hanteringsfunktion addEvent (obj, evt, fn, fånga) if (window.attachEvent) obj.attachEvent ("on" + evt, fn);  annat om (! capture) capture = false; // fånga obj.addEventListener (evt, fn, fånga) // Kontrollera om noden som klickades är en ankaremärke. Om så är fallet, fortsätt per vanligt. addEvent (ul, "click", funktionen (e) // Firefox och IE åtkomst till differentieringselementet different. e.target och event.srcElement. var target = e? e.target: window.event.srcElement; om (target.nodeName.toLowerCase () === 'a') alert ("clicked"); returnera false;);

• Följ oss på Twitter, eller prenumerera på Nettuts + RSS-flödet för de bästa webbutvecklingsstudierna på webben.