事件委托

事件委托（事件代理）

概述

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

时间委托的好处

一、节省内存开销

二、追加节点一样有效

为何要用事件委托

通常来讲，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操做。