js事件委托篇（附js⼀般写法和js、jq事件委托写法）
参考：
使⽤该技术能让你避免对特定的每个节点添加事件；相反，事件被添加在他们的⽗元素上，事件会分析从⼦元素上冒泡上来的事件，并到是哪个⼦元素事件。
现实当中，前台MM收到快递后，她会判断收件⼈是谁，然后按照收件⼈的要求签收，甚⾄代为付款。(公司也不会容
忍那么多员⼯站在门⼝就为了等快递);
这种事件委托还有个好处，就是即便公司⼜来很多员⼯，前台MM照样可以签收新员⼯的快递，新员⼯即便刚来但⼀
样拥有拿⾃⼰快件的⽅法；
通俗来讲：事件有：onclick、onmouseover、onmouseout等等；委托呢，就是让别⼈来做，这件事情本⾝是加在元素上，然⽽你却加载别⼈⾝上来做，完成事件；
原理：
利⽤冒泡原理，将事件加在⽗级上触发，执⾏效果；
好处：
1. 提⾼性能
2. 新添加元素，可以直接拥有事件；
事件源 :
跟this作⽤⼀样(他不⽤看指向问题，谁操作的就是谁),event对象下的
使⽤情景：
  * 为DOM中的很多元素绑定相同事件；
  * 为DOM中尚不存在的元素绑定事件；
栗⼦:
需要触发每个li来改变他们的背景颜⾊
<ul id="ul">
<li>111111111</li>
<li>22222222222</li>
<li>33333333</li>
<li>44444444444</li>
</ul>
js⼀般写法：
var oUl = ElementById('ul');
var aLi = ElementsByTagName('li');
for(var i=0; i<aLi.length; i++){
aLi[i].onmouseover = function(){
this.style.background = 'red';
}
js获取子元素aLi[i].onmouseout = function(){
this.style.background = ' ';
}
}
}
事件委托的js写法：
var oUl = ElementById('ul');
var aLi = ElementsByTagName('li');
/*这⾥⽤到事件源：event对象，事件源，不管在哪个事件中，只要你操作的那个元素就是事件源
ie： window.event.srcElent
标准下： event.target
nodeName: 到元素的标签名；
*/
var ev = ev||window.event;
var target = ev.target || ev.srcElement;
// console.log(target.innerHTML);
LowerCase() == "li"){
target.style.background = 'red';
}
}
var ev = ev || window.event;
var target = ev.target|| ev.srcElement;
LowerCase() == 'li'){
target.style.background = ' ';
}
}
}
事件委托的jq写法
$(function(){
$("#ul").on('click','li',function(){
if(!$(this).attr('s')){
$(this).css('background','red');
$(this).attr('s',true);
}else{
$(this).css('background','#fff');
$(this).removeAttr('s');
}
})
})
还有⼀种使⽤delegate()⽅法代替on() ; 现多不⽤，⽤法同on，只是参数顺序有变...delegate('li','click',function(){...})...