The event delegate in JS

1, what is the event delegate: Popular, the event is onclick,onmouseover,onmouseout, and so is the event, commissioned, is to let others do, this event is added to some elements, but you add to others to do, complete this event.

That is: using the bubbling principle, the event is added to the parent, triggering the execution effect.

Benefits: 1, improve performance.

We can look at an example: the need to trigger each Li to change their background color.

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

Window.onload =function(){varOul = document.getElementById ("ul");varALi = Oul.getelementsbytagname ("li"); for(vari=0; i<ali.length; i++) {Ali[i].onmouseover=function(){ This. Style.background = "Red";} Ali[i].onmouseout=function(){ This. Style.background = "";}}}

This allows us to add mouse events on top of Li.

But if we could have a lot of Li with a for loop, that would affect performance.

Here we can use the event delegate to achieve this effect. The HTML does not change

function () {var oul = document.getElementById ("ul"); var aLi = oul.getelementsbytagname ("Li");

/* The event source is used here: The event object, the source, regardless of the event, as long as the element you are manipulating is the source of the event. Ie:window.event.srcElement Standard: Event.targetnodename: Find the label name of the element */

Oul.onmouseover =function(EV) {varEV = EV | |window.event;vartarget = Ev.target | |ev.srcelement;//alert (target.innerhtml);if(target.nodeName.toLowerCase () = = "Li") {Target.style.background= "Red";}} Oul.onmouseout=function(EV) {varEV = EV | |window.event;vartarget = Ev.target | |ev.srcelement;//alert (target.innerhtml);if(target.nodeName.toLowerCase () = = "Li") {Target.style.background= "";}}}

Benefit 2, the newly added element will also have previous events.

We also take this example, but we want to do dynamic add Li. Click button to add Li dynamically

Such as:

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

We will do this without an event delegate:

Window.onload =function(){varOul = document.getElementById ("ul");varALi = Oul.getelementsbytagname ("li");varOBTN = document.getElementById ("btn");varInow = 4; for(vari=0; i<ali.length; i++) {Ali[i].onmouseover=function(){ This. Style.background = "Red";} Ali[i].onmouseout=function(){ This. Style.background = "";}} Obtn.onclick=function() {Inow++;varOLi = document.createelement ("li"); oli.innerhtml= 1111 *Inow;oul.appendchild (OLi);}}

In doing so we can see the click button on the newly added Li with no mouse-over events to change their background color.

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

Then we do it in the way of the event delegate. Is that HTML does not change

Window.onload =function(){varOul = document.getElementById ("ul");varALi = Oul.getelementsbytagname ("li");varOBTN = document.getElementById ("btn");varInow = 4; Oul.onmouseover=function(EV) {varEV = EV | |window.event;vartarget = Ev.target | |ev.srcelement;//alert (target.innerhtml);if(target.nodeName.toLowerCase () = = "Li") {Target.style.background= "Red";}} Oul.onmouseout=function(EV) {varEV = EV | |window.event;vartarget = Ev.target | |ev.srcelement;//alert (target.innerhtml);if(target.nodeName.toLowerCase () = = "Li") {Target.style.background= "";}} Obtn.onclick=function() {Inow++;varOLi = document.createelement ("li"); oli.innerhtml= 1111 *Inow;oul.appendchild (OLi);}}

Ok:

As in our microblog, the new tweet still has previous mouse events.