Using Event delegation technology allows you to avoid adding event listeners to a specific node. On the contrary, event Listeners are the most popular technology in the JavaScript field today that has been added to their parent element. It should be 'event delegation. Using Event delegation technology allows you to avoid adding event listeners to a specific node. On the contrary, event listeners are added to their parent element. The event listener analyzes the events from the child element bubbling and finds the child element event. The basic concept is very simple, but many people still do not understand how event delegation works. Here I will explain how event delegation works and provide several examples of basic event delegation in pure JavaScript.
Suppose we have a UL element, which has several sub-elements:
The Code is as follows:
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
We also assume that different events will occur when each child element is clicked. You can add event listeners to each independent li element, but sometimes these li elements may be deleted and added. It is a nightmare to listen for their new or deleted events, especially when your listening Event code is placed in another place of the application. But what if you place listeners on their parent elements? How do you know that the child element has been clicked?
Simple: when the sub-element event bubbles to the parent ul element, you can check the target attribute of the event object to capture the reference of the actually clicked node element. The following is a simple JavaScript code that demonstrates the event delegation process:
The Code is as follows:
// Locate the parent element and add the listener...
Document. getElementById ("parent-list"). addEventListener ("click", function (e ){
// E.tar get is the clicked element!
// If the clicked element is the li Element
If(e.tar get & e.tar get. nodeName = "LI "){
// Find the target and output the ID!
Console. log ("List item" ,e.tar get. 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 event source to exclude non-li subelement events. If it is a li element, we will find the target! If it is not a li element, the event will be ignored. This example is very simple. UL and li are a standard parent-child combination. Let's test some different elements. Suppose we have A parent element p with many child elements, but we are concerned about A tag with the "classA" CSS class:
The Code is as follows:
// Obtain the parent element DIV and add the listener...
Document. getElementById ("myDiv"). addEventListener ("click", function (e ){
// E.tar get is the clicked element.
If(e.tar get & e.tar get. nodeName = ""){
// Obtain the CSS Class Name
Var classes = e.tar get. className. split ("");
// Search and match!
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, we compared not only the label name, but also the CSS class name. Although a little more complex, it is quite representative. For example, if A certain A tag contains A span tag, the span will become the target element. At this time, we need to trace the DOM tree structure and find whether there is an element of A. classA in it.
Most programmers use jQuery and other tool libraries to process DOM elements and events. I suggest you use the event Delegate method in it, the tool Library provides advanced principal method and element identification method.
I hope this article will help you understand the behind-the-scenes principles of JavaScript event delegation. I hope you will also feel the powerful use of event delegation!
