Examples of technical principles of JavaScript event delegation_javascript skills

One of the hottest technologies in today’s JavaScript technology world should be ‘event delegation’. Using event delegation techniques allows you to avoid adding event listeners to specific each node; instead, event listeners are added to their parent elements. The event listener will analyze the events that bubble up from the child elements and find out which child element the event is from. The basic concept is very simple, but there are still many people who don't understand how event delegation works. Here I'm going to explain how event delegation works and provide a few examples of basic event delegation in pure JavaScript.

Suppose we have a UL element with several child elements:

Copy code The code is as follows:

• Item 1


• Item 2


• Item 3


• Item 4< /li>
  
• Item 5


• Item 6

< /ul>

We also assume that when each child element is clicked, a different event will occur. You can add event listeners to each independent li element, but sometimes these li elements may be deleted or added, and listening to their new or deleted events will be a nightmare, especially when your When the code that listens to the event is placed in another place in the application. But what if you place listeners on their parent elements? How do you know which child element was clicked?

Simple: When the child element's event bubbles up to the parent ul element, you can check the target attribute of the event object and capture the reference of the node element that was actually clicked. The following is a very simple JavaScript code that demonstrates the process of event delegation:

Copy the code The code is as follows:

// Find the parent element and add a listener...
document.getElementById("parent-list").addEventListener("click",function(e) {
// e .target is the clicked element!
// If the li element is clicked
if(e.target && e.target.nodeName == "LI") {
// Find the target and 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 and exclude non-li child element events. If it is a li element, we have found the target! If it is not a li element, the event will be ignored. This example is very simple, UL and li are standard parent-child combinations. Let's experiment with some different combinations of elements. Suppose we have a parent element div with many child elements inside, but what we care about is the A tag inside with the "classA" CSS class:

Copy code The code is as follows:

// Get the parent element DIV, add a listener...
document.getElementById("myDiv").addEventListener ("click",function(e) {
// e.target is the clicked element
if(e.target && e.target.nodeName == "A") {
// Get CSS class name
var classes = e.target.className.split(" ");
// Search for matches!
if(classes) {
// For every CSS class the element has. ..
for(var x = 0; x < classes.length; x ) {
// If it has the CSS class we want...
if(classes[x] == " classA") {
// Bingo!
console.log("Anchor element clicked!");

// Now do something here....

}
}
}

}
});

In the above example, not only the tag names are compared, but also the CSS class names are compared. Although it is a little more complicated, it is still very representative. For example, if there is a span tag in an A tag, this span will become the target element. At this time, we need to trace up the DOM tree structure to find out whether there is an A.classA element in it.

Because most programmers use jQuery and other tool libraries to handle DOM elements and events, I recommend that everyone use the event delegation method inside, because the tool library here provides advanced delegation methods and element screening. method.

I hope this article can help you understand the behind-the-scenes principles of JavaScript event delegation, and I hope you also feel the powerful use of event delegation!