Summary of js event delegation examples

Event delegation is also called event proxy. To put it simply, it binds the event to the parent and listens to the bubbling events of the child elements. If you have any questions about what event bubbling is, please click on the event in js, which has a detailed explanation of event bubbling. What do we need to know when using event delegation?

1. When using event delegation, we must also know a concept: the event source under the event object

Event source: In the event, the element currently operated is the event source . For example, when we click the a label and an onclick event occurs, the event source is the a label. When we click li and an onclick event occurs, the event source is li

How to obtain the event source?

Under IE: window.event.srcElement;

Under standard: event.target

Compatibility processing: var target = ev.target||ev.srcElement

2. Find the tag name of the current element: nodeName (if it is uppercase, use the toLowerCase() method to convert it to lowercase)

Having written so much, what are the benefits of using event delegation? ?

1. It can improve performance

2. Newly added elements will also have previous events

As for where it is reflected, let’s use examples to give you a feel.呗

HTML code

<ul id="ul1">
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
</ul>

The effect we want is that when the mouse moves into the li, the background color of the corresponding li changes to red, and when the mouse moves out, it changes to the original color

If The general way of writing is like this

<script>
var oUl = document.querySelector(&#39;#ul1&#39;);
var aLi = oUl.querySelectorAll(&#39;li&#39;);
for(var i=0; i<aLi.length; i++){
    aLi[i].onmouseover = function(){
        this.style.background = &#39;red&#39;;
    }
    aLi[i].onmouseout = function(){
        this.style.background = &#39;&#39;;
    }
}
</script>

Let’s look at how to use event delegation

<script>
var oUl = document.querySelector(&#39;#ul1&#39;);
oUl.onmouseover = function(ev){
    var ev = ev||event;//兼容性处理
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()==&#39;li&#39;){
        target.style.background =&#39;red&#39;;
    }
}
oUl.onmouseout = function(ev){
    var ev = ev||event;
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()==&#39;li&#39;){
        target.style.background =&#39;&#39;;
    }
}
</script>

In the above method we need to bind a click event to each Li, and in the following method we You only need to bind a click event to the parent. When the number of li's is small, it's okay. If there are many li's, it is conceivable that event delegation can greatly improve performance

Example 2,

HTML code

<ul id="ul1">
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
</ul>
按钮

We hope that when the button is clicked, li will be added to ul, and every time the mouse moves in, the background color of li will change, and when it moves out, the background color will change back. We know that if The usual method is that every time we add a li, we have to add a move-in and move-out event for it. You will know how troublesome it is by trying it yourself, but if we use event delegation, we don’t need to add it every time. , look at the code below (I think everyone knows how to do it, so I won’t write it anymore. The following is just how to write using event delegation)

<script>
var oUl = document.querySelector(&#39;#ul1&#39;);
var oBtn = document.querySelector(&#39;#btn&#39;);
oUl.onmouseover = function(ev){
    var ev = ev||event;
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()==&#39;li&#39;){
        target.style.background =&#39;red&#39;;
    }
}
oUl.onmouseout = function(ev){
    var ev = ev||event;
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()==&#39;li&#39;){
        target.style.background =&#39;&#39;;
    }
}
oBtn.onclick = function(){
    var ali = document.createElement(&#39;li&#39;);
    ali.innerHTML = &#39;1111111111111&#39;;
    oUl.appendChild(ali);//不管我们在ul里面添加多少个li我么都不需要再次为其添加绑定事件
}
</script>

After reading the above, do you think event delegation is really useful? Woolen cloth? So use it now!            

Related recommendations:

Detailed explanation of JS event delegation examples

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