A detailed description of the JavaScript event delegation mechanism

As a personal front-end job interview experience, JavaScript event delegation is one of the most frequently asked questions, familiar with event delegates to understand how much you know about JavaScript.

The interviewer may ask a question, there are now 5 Li Todo events that need to implement the information that pops up when an li is clicked

<ul class= "Top" >
<li> oranges </li>
<li> Banana </li>
<li> Apple </li>
<li> Pears </li>
<li> Pineapple </li>
</ul>

When you click on the first Li, an "orange" will be displayed

The idea that we're implementing might think of a For loop + method for getting array objects, which we can do with jquery. The code is as follows:

<script type= "Text/javascript" >
Window.onload=function () {
var getul=$ ('. Top ');
var getli=$ ('. Top Li ');
for (Var i=0;i<getli.length;i++) {
Getli[i].onclick=function () {
Alert (this). html ());//Get Li Value method

}
}

}
</script>

What is the effect of this implementation? Standing in front of the performance optimization perspective, we need to reduce DOM operations to improve page performance. Each time you click on the code, you need to get DOM elements, from UL to Li to alert events. If there are more than 1000 Li, doing so will consume more memory. What better solution do we have?

Before explaining the event delegation, let's look at the event bubbling mechanism

Event bubbling is the event that starts with the deepest node and then propagates the events up and down, for example: There is a node tree on the page,div>ul>li>a; for example, to add a click Click event to the innermost a, then this event will be executed one layer at a level, execution order a >li>ul>div, there is such a mechanism, then we give the outermost div plus click events, then the inside of the Ul,li,a do click events, will bubble to the outermost div, so it will trigger, this is the event delegate, delegate their parents to execute the event on their behalf.

To put it simply, we implement the above effect, and we use the principle of event delegation like this

When I click on Li, it is not implemented by a specific Li, but by bubbling to his parent element to implement, we add a div to the code level

<script type= "Text/javascript" >
Window.onload=function () {
var Oul = document.getElementById ("top");
var aLi = oul.getelementsbytagname (' li ');
Oul.onclick = function (EV) {
var ev = EV | | window.event;
var target = Ev.target | | Ev.srcelement;
if (target.nodeName.toLowerCase () = = ' Li ') {
Console.log (target.innerhtml);

}

};
};

</script>

It is important to note that there is a target property in the event that is used to implement the target, which is the specific Li when the event occurs.

If there are any mistakes, please feel free to correct them.

A detailed description of the JavaScript event delegation mechanism