Event delegation in JavaScript

1. What is event delegation: In layman's terms, events are onclick, onmouseover, onmouseout, etc. are events, and delegation is to let others do it. This event was originally added to some elements, but you added it to others. Do it on your body to complete the event.

That is: using the principle of bubbling, add the event to the parent to trigger the execution effect.

Benefits: 1. Improve performance.

We can look at an example: each li needs to be triggered to change their background color.

<ul id="ul">
  <li>aaaaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccc</li>
</ul>

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

  for(var i=0; i<aLi.length; i++){
    aLi[i].onmouseover = function(){
      this.style.background = "red";
    }
    aLi[i].onmouseout = function(){
      this.style.background = "";
    }
  }
}

In this way, we can add mouse events to li.

But if we may have a lot of li using for loop, it will affect the performance.

Below we can use event delegation to achieve this effect. html unchanged

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

/*
The event source is used here: event object, event source, no matter in which event, as long as the element you operate is the event source.
ie：window.event.srcElement
Under standard: event.target
nodeName: the tag name of the found element
*/
  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 = "";
    }
  }
}

Benefit 2, newly added elements will also have previous events.

Let's take this example, but we need to add li dynamically. Click button to dynamically add li

Such as:

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

 Without event delegation we would 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);
  }


}

Doing this we can see that there is no mouse-in event on the newly added li on the click button to change their background color.

Because the for loop has been executed when you click to add.

Then we use event delegation to do it. is the html 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);
  }
}

ok：

Just like in our Weibo, the new Weibo still has the previous mouse events.

Go to: http://itindex.net/detail/48661-js-%E4%BA%8B%E4%BB%B6