Reproduced The principle and advantages and disadvantages of JS event delegate (event broker)

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.

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

Window.onload =function () {  var Oul = document.getElementById ("UL");  var aLi = oul.getelementsbytagname ( for (var i=0; i<ali.length; i++) {   Ali[i].onmouseover = function () {    this.style.background = Span class= "string" > "red";  }  Ali[i].onmouseout = function () {   this.style.background =  }}}           /span>                

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

Window.onload =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) {  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; Span class= "indent" > var target = Ev.target | | Ev.srcelement;  //alert (target.innerhtml);  if (target.nodeName.toLowerCase () = =  "Li") {  Target.style.background = }}}           /span>               

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:

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

We will do this without an event delegate:

Window.onload =function () {  var Oul = document.getElementById ("UL");  var aLi = Oul.getelementsbytagname ("Li"); var obtn = document.getElementById ("BTN"); var Inow =4; Forvar 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 (  oli.innerhtml = 1111 *inow;  Oul.appendchild (oLi); }}           /span>                

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 () {  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);  }}< /c6> 

Ok:

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

Pros : 1. You can save a lot of memory footprint and reduce event registration. For example, UL agent all Li's Click event is very good.
2. Can be implemented when new sub-objects, no longer need to be bound to the event, the dynamic Content section is particularly appropriate
cons : The common application of event agents should be limited to the above requirements, and if you use event proxies for all events, event errors may occur. Events that should not have been triggered are bound to events.

Zz:http://www.cnblogs.com/dearxinli/p/3824700.html http://www.cnblogs.com/xiayu25/p/6269652.html

Reproduced The principle and advantages and disadvantages of JS event delegate (event broker)