One of the hottest technologies in the JavaScript technology world today should be the ' event delegation '. Using event-delegation techniques allows you to avoid adding event listeners to specific nodes; Instead, event listeners are added to their parent element. The event listener analyzes events bubbling from child elements and finds which child element is an event. The basic concept is simple, but there are still a lot of people who don't understand how the event delegate works. Here I will explain how event delegates work, and provide examples of basic event delegates that are pure JavaScript.
Assuming we have a UL element, it has several child elements:
Copy Code code as follows:
<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>
We also assume that when each child element is clicked, a different event occurs. You can add event listeners to each individual Li element, but sometimes these Li elements may be deleted and may be added, and listening to their new or deleted events will be a nightmare, especially if the code for your listening event is placed in another place in the application. But what if you put the listener on their parent element? How do you know that the child element was clicked?
Simple: When the child element event bubbles to the parent UL element, you can check the target attribute of the event object to capture the reference to the node element that is actually clicked. The following is a very simple JavaScript code that demonstrates the process of an event delegate:
Copy Code code as follows:
Find the parent element, add the listener ...
document.getElementById ("Parent-list"). AddEventListener ("click", Function (e) {
E.target is the element that is clicked!
If the Li element is clicked
if (e.target && e.target.nodename = = "LI") {
Find the target, output id!
Console.log ("List item", E.target.id.replace ("post-"), "was clicked!");
}
});
The first step is to add an event listener to the parent element. When an event triggers the listener, check the source of the event, excluding the non-Li child element event. If it is an LI element, we will find the target! If it is not an LI element, the event is ignored. This example is very simple, UL and Li is the standard father and son collocation. Let's experiment with some very different elements. Let's say we have a parent element div with many child elements in it, but we are concerned with a tag with a "ClassA" CSS class in it:
Copy Code code as follows:
Get the parent element Div, add Listener ...
document.getElementById ("Mydiv"). AddEventListener ("click", Function (e) {
E.target is the element that is clicked
if (e.target && e.target.nodename = "A") {
Get CSS class name
var classes = E.target.classname.split ("");
Search Match!
if (classes) {
For every CSS class the element has ...
for (var x = 0; x < Classes.length + +) {
If it has the CSS class we want ...
if (classes[x] = = "ClassA") {
Bingo!
Console.log ("Anchor element clicked!");
Now does something here ....
}
}
}
}
});
The above example not only compares the label name, but also compares the CSS class name. Although a little more complex, but still very representative. For example, if there is a span tag in a tag, the span becomes the target element. At this point, we need to trace the DOM tree structure to find out if there is a A.CLASSA element in it.
Since most programmers use the tools library such as jquery to handle DOM elements and events, I recommend that you use the event delegation method inside, because there are advanced delegate methods and element screening methods available in the tool library.
Hopefully this article will help you understand the behind-the-scenes principles behind the JavaScript event delegate, and hope you feel the power of the event delegates too!
