How JavaScript Event Delegation Works
2016-07-01 17:49
621 查看
By David Walsh on March 7, 2011
One of the hot methodologies in the JavaScript world is event delegation, and for good reason. Event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent. That event listener analyzes
bubbled events to find a match on child elements. The base concept is fairly simple but many people don't understand just how event delegation works. Let me explain the how event delegation works and
provide pure JavaScript example of basic event delegation.
Let's say that we have a parent
Let's also say that something needs to happen when each child element is clicked. You could add a separate event listener to each individual
but what if
be a nightmare, especially if addition and removal code is in different places within your app. The better solution is to add an event listener to the parent
But if you add the event listener to the parent, how will you know which element was clicked?
Simple: when the event bubbles up to the
to the actual clicked node. Here's a very basic JavaScript snippet which illustrates event delegation:
Start by adding a
event element to ensure it's the type of element to react to. If it is an
If it's not an element that we want, the event can be ignored. This example is pretty simple --
a straight-forward comparison. Let's try something more difficult. Let's have a parent DIV with many children but all we care about is an
with the
Using the Element.matches API, we can see if the element matches our desired target.
Since most developers use a JavaScript library for their DOM element and event handling, I recommend using the library's method of event delegation, as they are capable of advanced delegation and element identification.
Hopefully this helps you visually the concept behind event delegation and convinces you of delegation's power!
One of the hot methodologies in the JavaScript world is event delegation, and for good reason. Event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent. That event listener analyzes
bubbled events to find a match on child elements. The base concept is fairly simple but many people don't understand just how event delegation works. Let me explain the how event delegation works and
provide pure JavaScript example of basic event delegation.
Let's say that we have a parent
ULelement with several child elements:
<ul id="parent-list"> <li id="post-1">Item 1</li> <li id="post-2">Item 2</li> <li id="post-3">Item 3</li> <li id="post-4">Item 4</li> <li id="post-5">Item 5</li> <li id="post-6">Item 6</li> </ul>
Let's also say that something needs to happen when each child element is clicked. You could add a separate event listener to each individual
LIelement,
but what if
LIelements are frequently added and removed from the list? Adding and removing event listeners would
be a nightmare, especially if addition and removal code is in different places within your app. The better solution is to add an event listener to the parent
ULelement.
But if you add the event listener to the parent, how will you know which element was clicked?
Simple: when the event bubbles up to the
ULelement, you check the event object's target property to gain a reference
to the actual clicked node. Here's a very basic JavaScript snippet which illustrates event delegation:
// Get the element, add a click listener... document.getElementById("parent-list").addEventListener("click", function(e) { // e.target is the clicked element! // If it was a list item if(e.target && e.target.nodeName == "LI") { // List item found! Output the ID! console.log("List item ", e.target.id.replace("post-", ""), " was clicked!"); } });
Start by adding a
clickevent listener to the parent element. When the event listener is triggered, check the
event element to ensure it's the type of element to react to. If it is an
LIelement, boom: we have what we need!
If it's not an element that we want, the event can be ignored. This example is pretty simple --
ULand
LIis
a straight-forward comparison. Let's try something more difficult. Let's have a parent DIV with many children but all we care about is an
Atag
with the
classACSS class:
// Get the parent DIV, add click listener... document.getElementById("myDiv").addEventListener("click",function(e) { // e.target was the clicked element if (e.target && e.target.matches("a.classA")) { console.log("Anchor element clicked!"); } });
Using the Element.matches API, we can see if the element matches our desired target.
Since most developers use a JavaScript library for their DOM element and event handling, I recommend using the library's method of event delegation, as they are capable of advanced delegation and element identification.
Hopefully this helps you visually the concept behind event delegation and convinces you of delegation's power!