Event delegation in js and js event Delegation

Event delegation in js and js event Delegation

1. What is event delegation: In general, events are onclick, onmouseover, onmouseout, and so on. Entrusting is to let others do it, this event was originally added to some elements, but you add it to others to complete this event.

That is, the event is added to the parent level based on the principle of bubbling to trigger the execution effect.

Benefits: 1. improve performance.

Let's 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 a mouse event on the li.

However, if we say there may be many li for loops, the performance will be affected.

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: the event object, the event source. No matter which event, the element you operate on is the event source. Ie: window. event. under the srcElement standard: event.tar getnodeName: locate the Tag Name of the element */oUl. onmouseover = function (ev) {var ev = ev | window. event; var target = ev.tar get | 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.tar get | ev. srcElement; // alert (target. innerHTML); if (target. nodeName. toLowerCase () = "li") {target. style. background = "";}}}

Benefit 2: the newly added element has a previous event.

We also take this example, but we need to dynamically Add li. Click button to add li dynamically

For example:

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

We will do this without event entrusting:

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);  }}

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

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

Then we use event delegation. That is, 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);  }}