JS Event Delegate

The event is onclick,onmouseover,onmouseout, and so on, the delegate event is an event that was added to an element, but added to someone else to complete the event.

Principle: Using bubbling, the event is added to the parent, triggering the execution effect.

Benefits: 1, improve performance, thereby improving the user experience.

Example: Triggering each Li to change its background color: Adding mouse events on Li

<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 = "";}}  }

The For loop comparison affects performance, and the following is done with delegate events

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;    var target = Ev.target | | ev.srcelement;    alert (target.innerhtml);    if (target.nodeName.toLowerCase () = = "Li") {    target.style.background = "";}}  }

Benefit 2: The newly added element still has the above event

Requirement: Add dynamic Li, click button to add Li dynamically

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

You do not need to delegate an event to 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);  }}

To do this, the newly added Li has no mouse events and cannot change the background color because the for loop has been completed while clicking Add.

To do with a delegate event:

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

And the newly added Li has its own mouse event.

Related actions for the drop-down box:

var projectName = $ ("#provinceAreaCode"). Find ("option:selected"). Text ();//Gets the text of the selected drop-down box

var projectName = $ ("#provinceAreaCode"). Val ();//Gets the value of the selected drop-down box

Find (), which searches for an element that matches the specified expression, which is a good way to find out which element is being processed by the descendant elements.

JS Event Delegate