Hurtig Tips Delegasjon av JavaScript-begivenhet på 4 minutter

Event delegering kan være et forvirrende tema for de som ikke er kjent med konseptet. Men heldigvis er det veldig enkelt. I denne hurtigvideo-videoopplæringen vil jeg demonstrere konseptet på bare under fire minutter.

Skriv inn hendelsesdelegering

I stedet, med hendelsesdelegasjon, legger vi ganske enkelt til en enkelt hendelselytter til et forfedreelement, kanskje noe som en "ul." Da, når brukeren klikker på et av sine barnelementer, som en ankermerke, kontrollerer vi bare for å se om målet for klikket faktisk var en ankermerke. Hvis det var, fortsetter vi per vanlig.

$ ('ul'). klikk (funksjon (e) hvis ($ (e.target) .is ('a')) alert ('klikket'););

Fordeler

• Bare fest en hendelseslytter til siden, i stedet for fem hundre (i vårt eksempel)
• Dynamisk opprettede elementer vil fortsatt være bundet til hendelseshandleren.

Hvorfor virker dette?

Det fungerer på grunn av måten elementene er fanget (ikke IE) og boble opp. For eksempel, vurder følgende enkle struktur.

 
Anker
 

Når du klikker på ankeretiketten, klikker du også på 'li' og 'ul' og til og med elementet 'kropp'. Dette kalles å boble opp.

Merknader om denne skjermbildet

Vær oppmerksom på at dette bare er et enkelt eksempel for å forklare funksjonaliteten. Vi brukte jQuery, bare fordi jeg hadde fire minutter å spille inn! I det aktuelle eksemplet (se på screencast først), kunne vi ha brukt to alternative alternativer:

1. Pass sann som en parameter av klonen () -metoden. Dette ville da klone elementet, så vel som eventuelle hendelseshåndterere.
2. Bruk live () -metoden i stedet. Vær imidlertid forsiktig når du bruker denne metoden: den reattaches hendelseshandleren X ganger. Dette kan ikke nødvendigvis være nødvendig.

For det meste var dette ment å demonstrere ideen. Med vanlig JavaScript kan du gjøre noe som helst:

// Få noen uordnet liste, som inneholder ankerkoder var ul = document.getElementById ('items'); // Rask og enkel kryssbrowser hendelseshåndterer - for å kompensere for IEs attachEvent handler-funksjon addEvent (obj, evt, fn, fangst) if (window.attachEvent) obj.attachEvent ("on" + evt, fn);  else if (! capture) capture = false; // fange obj.addEventListener (evt, fn, fange) // Sjekk for å se om noden som ble klikket, er en ankermerke. I så fall fortsett som vanlig. addEvent (ul, "klikk", funksjon (e) // Firefox og IE tilgang til målelementet forskjellige. e.target og event.srcElement, henholdsvis. var target = e? e.target: window.event.srcElement; hvis (target.nodeName.toLowerCase () === 'a') alert ("klikket"); return false;);

• Følg oss på Twitter, eller abonner på Nettuts + RSS-feed for de beste webutviklingsopplæringene på nettet.