Snelle tip JavaScript-evenement delegatie in 4 minuten

Afvaardiging van evenementen kan een verwarrend onderwerp zijn voor mensen die niet vertrouwd zijn met het concept. Maar gelukkig is het heel eenvoudig. In deze quick-tip video-zelfstudie laat ik het concept in minder dan vier minuten zien.

Voer Event Delegation in

In plaats daarvan voegen we met een gebeurtenisafspraak eenvoudig een enkele gebeurtenislistener toe aan een voorouderelement, misschien iets als een 'ul'. Wanneer de gebruiker vervolgens op een van de onderliggende elementen klikt, zoals een ankertag, controleren we alleen om te zien of het doelwit van de klik in feite een ankertag was. Als dat zo was, gaan we gewoon door.

$ ('ul'). klik (functie (e) if ($ (e.target) .is ('a')) alert ('geklikt'););

voordelen

• Voeg slechts één gebeurtenislistener toe aan de pagina in plaats van vijfhonderd (in ons voorbeeld)
• Dynamisch gemaakte elementen zijn nog steeds gebonden aan de gebeurtenishandler.

Waarom werkt dit?

Het werkt vanwege de manier waarop elementen worden vastgelegd (niet IE) en bubbelen. Overweeg bijvoorbeeld de volgende eenvoudige structuur.

 
Anker
 

Wanneer u op de ankertag klikt, klikt u ook op het 'li' en het 'ul'- en zelfs het' body'-element. Dit wordt borrelen genoemd.

Opmerkingen over deze Screencast

Houd er rekening mee dat dit slechts een eenvoudig voorbeeld is van de functionaliteit. We gebruikten jQuery, alleen omdat ik vier minuten had om op te nemen! In dat specifieke voorbeeld (kijk eerst naar de screencast), hadden we twee alternatieve opties kunnen gebruiken:

1. Geef true door als een parameter van de methode clone (). Dit zou dan het element klonen, evenals event-handlers.
2. Gebruik in plaats daarvan de methode liv (). Wees echter voorzichtig bij het gebruik van deze methode: het koppelt de gebeurtenishandler X keer opnieuw aan. Dit hoeft niet per se nodig te zijn.

Meestal was dit bedoeld om het idee te demonstreren. Met normale JavaScript zou je iets kunnen doen als:

// Haal een ongeordende lijst op met ankertags var ul = document.getElementById ('items'); // Snelle en eenvoudige event-handler voor alle browsers - ter compensatie van IE's attachEvent-handler-functie addEvent (obj, evt, fn, capture) if (window.attachEvent) obj.attachEvent ("on" + evt, fn);  else if (! capture) capture = false; // capture obj.addEventListener (evt, fn, capture) // Controleer of het knooppunt waarop werd geklikt een ankertag is. Als dat zo is, gaat u door zoals gewoonlijk. addEvent (ul, "klik", functie (e) // Firefox en IE hebben toegang tot het doelelement anders., e.target, en event.srcElement, respectievelijk. var target = e? e.target: window.event.srcElement; if (target.nodeName.toLowerCase () === 'a') alert ("geklikt"); return false;);

• Volg ons op Twitter of abonneer je op de Nettuts + RSS Feed voor de beste tutorials voor webontwikkeling op internet.