事件委托

事件委托（事件代理）

概述

事件委托就是利用事件冒泡，指定一个事件处理程序，就可以管理某一类的事件

时间委托的好处

1、节省内存开销

2、追加节点同样有效

为什么要用事件委托

一般来说，dom需要事件处理，我们直接给他设事件处理就好了，但是如果多了dom的话，我们就需要设多个事件，这样大大的增加了内存的开销。比如我们有1000个li，每一个都加一个click事件，那么我们就增加了1000个内存空间，如果使10000个，100000个的话，可想而知我们将要开辟10000个,100000个乃至跟多，所以我们如果用事件委托， 只对他的父级进行一个dom操作的话，我们只需要开辟一块内存空间就ok。

事件委托怎么实现

在做事件委托之前我们先做个一般的方法的例子

子节点实现相同的功能：

<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

实现功能是划过变色

var lis = document.getElementsByTagName("li")
for(var i=0,l=lis.length;i<l;i++){
    lis[i].onmousemove= function(){
        this.className="light";
    }
    lis[i].onmouseout = function(){
        this.className="";
    }
}

上面代码的意思很简单，首先要找到ul，然后遍历li，然后划过那个li的时候，又要找一次li的位置，每次划过都要找。如果我们自动追li的时候，每追加一次我们就得写一次for，我们将消耗太多的内存。

那么我们用事件委托的方式做

window.onload = function(){
    var oUl = document.getElementById("ul1");
   oUl.onmousemove= function(ev){
        var oEvent = ev || window.event;
　　　　var target = oEvent.target || oEvent.srcElement;
　　　　target.className="light";
    }
   oUl.onmouseout = function(ev){
        var oEvent = ev || window.event;
　　　　var target = oEvent.target || oEvent.srcElement;
　　　　target.className="";
    }
}

从上面我们可以看出我们只给li父级一个事件，那么我们在划过每一个li的时候，每次只执行一次dom操作。