Detailed explanation of JS event delegation examples

This article mainly shares with you the detailed explanation of JS event delegation examples. Let’s take a look at the analysis first. Event delegation: also called event proxy, it uses the principle of bubbling to add events to the parent to trigger the execution effect.

First of all, you must have written such a program. There is a list. When the mouse moves into each li, the background color turns red, so we wrote this code:

(The code I give is usually the key code, you can write the html by yourself.)

window.onload =  oUl = document.getElementById('ull' aLi = document.getElementsByTagName('li'); 
    ( i =0;i <p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);"> Of course, there is no problem if you look at the code like this. You can add events to each li through a loop, but think about it. If we have many li, do we need to add many events? This is actually very performance consuming. Then we will wonder if we can achieve it by just adding one event. Of course it is possible, otherwise I wouldn’t be talking about it. </p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);"> That is event delegation through the bubbling principle. We can add events only to the parent oUL, so that no matter which li is moved in, the parent's move-in event will be triggered. (For those who don't understand bubbling, You can refer to my JS bubbling article), but there is also a problem at this time, because my requirement is to change the color of the corresponding li, not the entire list. How does it know which LI I moved the mouse into? At this time One attribute in the universal event object is about to appear, which is the event source (regardless of which element the event is bound to, it refers to the target that actually triggers the event), which can get the LI where your current mouse is located, </p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">However, this has compatibility issues. IE is different from the standard. The standard refers to the newer versions of browsers. </p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">IE: window.event.srcElement<br>Standard: event. target</p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">So we need to make compatibility, which is also very simple. </p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">Look at the overall code below: </p><pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;white-space:pre-wrap;font-family:'Courier New';" class="brush:php;toolbar:false;">window.onload = function(){ 
    var oUl = document.getElementById('ull');     var aLi = document.getElementsByTagName('li');

  oUl.onmouseover = function(ev){ 
     var event = ev||window.event;  // 获取event对象     var target = ev.target || ev.srcElement; // 获取触发事件的目标对象    
     if(target.nodeName.toLowerCase() == 'li'){  //判断目标对象是不是li
         target.style.background = 'red';
     }

  }
代码中加了一个标签名的判断，主要原因是如果不加判断，当你鼠标移入到父级oUL上面的时候，整个列表就会变红，这不是我们想要的结果，所以要判断一下。

target.nodeName 弹出的名字是大写的，所以需要转换大小写再比较。

The entire requirement is completed in this way, and the performance is greatly improved when there are many lists.

In fact, event delegation has a second advantage: newly added elements will also have previous events

Suppose we have another requirement, click a button , you can create another li in the list. At this time, the general method is that because the newly created li does not have an event added, it does not have the function of moving in and turning red. However, using the event delegation method, the new li also has this event. . The principle is also very easy to apply, because the event is added to the father. If the father is there, the event is there. You can test it yourself.

Related recommendations:

What are events in js Bubbling and event capturing and event delegation

Comparative analysis of event capture, bubbling and event delegation

Detailed explanation of Javascript event delegation

The above is the detailed content of Detailed explanation of JS event delegation examples. For more information, please follow other related articles on the PHP Chinese website!