什么是事件委托？
委托是啥意思？就是本来吧中午啊你要自己去买饭，结果这个时候室友问你要不要带饭？你说好啊！于是带饭这个操作就被你委托给室友了。
事件委托 的意思是，本来这个事件是由节点本身去执行的，现在用其他节点委托执行。
怎么进行事件委托？
我们来看一个再普通不过的例子吧，有以下html结构
<ul id="delegate">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
假设这时候有需求如下，我希望鼠标经过li节点的时候，节点的背景色变为红色，鼠标移出则变回来，我们通常会这么写
<script type="text/javascript">
var aUl=document.querySelector('#delegate');
var aLis=div.querySelectorAll('li');
for (var i = 0; i < aLis.length; i++) {
aLis[i].onmouseover=function(){
this.style.backgroundColor='red';
}
aLis[i].onmouseout=function(){
this.style.backgroundColor='';
}
}
</script>
没毛病哈~那么问题来了，我们怎么把li的事件委托给其他节点替他执行呢？
首先说下事件委托的原理是利用什么，大家都知道js里面事件有冒泡机制，当我们鼠标经过li的时候它的onmouseover事件会触发，它的父亲元素ul的onmouseover事件也会被触发,事件委托就是利用事件冒泡机制来完成的。不多说上代码
var aUl=document.querySelector('#delegate');
var aLis=div.querySelectorAll('li');
aUl.onmouseover=function(ev){
var ev=ev||window.event;//事件对象兼容
var target=ev.target||ev.srcElement;//冒泡时拿到当前的触发事件的元素（事件源）
target.style.backgroundColor='red';
}
aUl.onmouseout=function(ev){
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
target.style.backgroundColor='';
}
以上代码就完成了最简单的事件委托，是不是很简单？但是问题来了，这样写有没有问题？
答案是：有！！！
我们给 ul 添加的onmouseover和onmouseout事件，那么鼠标经过 ul ，ul的背景也是会边红的！！！
那么怎么办？
其实我们获取到事件源之后，事件源是一个 DOM 节点，我们是可以拿到节点的名字 target.nodeName,我们只需要判断下节点名字就行啦啊！！来来来！！！
aUl.onmouseover=function(ev){
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
console.log(target.nodeName);
if(target.nodeName=='LI'){
target.style.backgroundColor='red';
}
}
aUl.onmouseout=function(ev){
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
if(target.nodeName=='LI'){
target.style.backgroundColor='';
}
}
这么写有什么好处呢？
1、对比委托前和委托后的代码就知道，本来每个 li 上都有两个事件句柄，委托后我们只给 ul 增加了两个事件句柄，可以大量节省内存占用，减少事件注册
2、通过js代码新添加li节点同样有事件，不用单独注册（相似如jquery.delegate()）
注：事件委托虽然好，但是还是有需要注意的地方的，最明显的就是我的例子中判断是不是 li 节点这个处理，当前节点结构简单，如果被委托元素内节点类型众多，判断条件就会很复杂。
