What is js event delegation? What are the benefits of using js event delegation?-JS Tutorial-php.cn

What is js event delegation? What are the benefits of using js event delegation?

不言

Release： 2018-08-29 17:37:25

Original

6043 people have browsed it

What is js event delegation? What are the benefits of using event delegation? I believe many friends may have such questions, so the following article will tell you about the concept of js event delegation and the benefits of using js event delegation.

1. What is js event delegation?

Use event bubbling to handle dynamic element event binding. The professional term is called event delegation. To put it simply, it is to bind events to the parent element to monitor the bubbling events of the child elements. And to find out which sub-element the event is, a more popular method is to let others do it. This event was originally added to certain elements, but you added it to someone else to complete the event. (What are the events? Please see: JavaScript Chinese Reference Manual)

For example, the following example: Native js implements event delegation

<!DOCTYPE html>
<html>
<head>
<title>事件委托测试</title>
</head>
<body>
<style type="text/css">
*{margin: 0;padding: 0;}
a{text-decoration: none;}
ul,li{list-style: none;}
div{display: block;width: 500px;padding: 200px 0 0 200px;}
div ul li{display: block;width: 100%;text-align: center;height: 35px;line-height: 35px;}
div ul li:nth-child(2n){background: #f00;}
</style>
<div>
    <ul>
        <li><a>测试1</a></li>
        <li><a>测试2</a></li>
        <li><a>测试3</a></li>
        <li><a>测试4</a></li>
        <li><a>测试5</a></li>
        <li><a>测试6</a></li>
        <li><a>测试7</a></li>
        <li><a>测试8</a></li>
    </ul>
</div>
<script type="text/javascript">
document.getElementsByTagName("ul")[0].addEventListener(&#39;click&#39;,function(e){
    alert("点击的内容是："+e.target.innerHTML);
});
</script>
</body>
</html>

Copy after login

Note: There are three steps to implement event delegation in js:

The first step: bind the event to the parent element
Add a binding event to the element ul, and use addEventListener for the click event click Add binding

Step 2: Listen to the bubbling event of the sub-element
The default here is bubbling. Clicking on the sub-element li will bubble upward

Step 3: Find which child element the event is from

The parameter e of the anonymous callback function is used to receive the event object, and the target of the triggered event is obtained through target

2. Benefits of js event delegation:

Benefits of event delegation 1: Event delegation technology can avoid adding event listeners to each word element and reduce the number of operations on DOM nodes. times, thereby reducing browser redraws and reflows and improving code performance.

We can look at an example: we need to add li dynamically. Click the button to dynamically add li

<input type="button" id="btn" /><ul id="ul">
  <li>aaaaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccc</li></ul>

Copy after login

Without event delegation we will do this:

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");
  var oBtn = document.getElementById("btn");
  var iNow = 4;
  for(var i=0; i<aLi.length; i++){
    aLi[i].onmouseover = function(){
      this.style.background = "red";
    }
    aLi[i].onmouseout = function(){
      this.style.background = "";
    }
  }

  oBtn.onclick = function(){
    iNow ++;
    var oLi = document.createElement("li");
    oLi.innerHTML = 1111 *iNow;
    oUl.appendChild(oLi);
  }

  
}

Copy after login

In this way we can see that there is no mouse move event on the newly added li when the button is clicked to change their background color .

Because the for loop has already been executed when you click Add.

Then we use event delegation to do it. That is, the html remains unchanged

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");
  var oBtn = document.getElementById("btn");
  var iNow = 4;

  oUl.onmouseover = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "red";
    }
  }
  oUl.onmouseout = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "";
    }
  }
  oBtn.onclick = function(){
    iNow ++;
    var oLi = document.createElement("li");
    oLi.innerHTML = 1111 *iNow;
    oUl.appendChild(oLi);
  }
}

Copy after login

Benefits of event delegation 2:Using event delegation, only the parent element interacts with the DOM, and other operations are completed in JS virtual memory, so that Greatly improved performance.

Related recommendations:

Event delegation in js

##javascript event delegation and jQuery event binding on, off and one

The above is the detailed content of What is js event delegation? What are the benefits of using js event delegation?. For more information, please follow other related articles on the PHP Chinese website!