事件委托

概述：

　　什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。

　　举个列子：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采 用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这 种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

　　事件委托主要应用于给大量相同的dom元素绑定事件和给尚不存在的元素绑定事件。

　　事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点 树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序 a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡 到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

事件委托怎么实现：

先来个栗子：给ul下的每个li绑定click事件

<ul id="list">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<ul>

不使用事件代理是处理如下：

window.onload = function(){
    var oUl = document.getElementById("list");
    var aLi = oUl.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick = function(){
            alert('aaa');
        }
    }
}

这样当存在大量的li时，会频繁的操作dom，不利于用户体验。

事件委托处理如下：

window.onload = function(){
    var oUl = document.getElementById("list");
   oUl.onclick = function(ev){
        var ev = ev || window.event;
　　　　 var target = ev.target || ev.srcElement;//标准浏览器用ev.target，IE浏览器用event.srcElement，
	if(target.nodeName.toLowerCase() == 'li'){
	　　alert(target.innerHTML);
	}
    }
}

这样改下就只有点击li会触发事件了，且每次只执行一次dom操作，如果li数量很多的话，将大大减少dom的操作，优化的性能可想而知！

在jquery中的事件委托方法为：on()，以前为：delegate()

$(function(){ 
     $('#list').on('click','li',function(){ 
            ....
      }) 
});

总结：

适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。

值得注意的是，mouseover和mouseout虽然也有事件冒泡，但是处理它们的时候需要特别的注意，因为需要经常计算它们的位置，处理起来不太容易。

不适合的就有很多了，举个例子，mousemove，每次都要计算它的位置，非常不好把控，在不如说focus，blur之类的，本身就没用冒泡的特性，自然就不能用事件委托了。