js性能优化_事件委托

什么是事件委托：
事件委托就是在一个页面上使用一个事件来管理多种类型的事件。通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。
也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。

这样做有什么好处：
事件委托并不是一个新的想法，但对于把握性能来说却很重要。通常情况，你会在web应用程序中看到这样的代码：
document.getElementByIdx_x_x("help-btn").onclick = function(event){ openHelp(); };
document.getElementByIdx_x_x("save-btn").onclick = function(event){ saveDocument(); };
document.getElementByIdx_x_x("undo-btn").onclick = function(event){ undoChanges(); };
这种传统的编码方式给每个元素分配单独的事件处理方法。对于交互少的站点来说，这样做是可以的。然而，对于大型的web应用程序，当存在大量的事件处理 的时候，就会显得反应迟钝。这里要关注的不是速度问题，而是内存占用问题。如果有数百个交互，DOM元素和JavaScript代码就会有数百个关联。 web应用需要占用的内存越多，它的响应速度就越慢。事件委托能将这个问题减小。

好处呢：1，提高性能。

举个例子：需要触发每个li来改变他们的背景颜色。

   
aaaaaaaa
   
bbbbbbbb
   
cccccccc

window.onload = function () {
    var oUl = document.getElementById("ul");
    var aLi = oUl.getElementsByTagName("li");
    for (var i = 0; i < aLi.length ; i++) {
        aLi[i].onmouseover = function () {
            this.style.background = "red";
        }
        aLi[i].onmouseout = function () {
            this.style.background = "";
        }
    }
}

这样我们就可以做到li上面添加鼠标事件。
但是如果说我们可能有很多个li用for循环的话就比较影响性能。
下面我们可以用事件委托的方式来实现这样的效果。html不变

window.onload = function(){
    var oUl = document.getElementById("ul");
    var aLi = oUl.getElementsByTagName("li");

    /*
    这里要用到事件源：event 对象，事件源，不管在哪个事件中，只要你操作的那个元素就是事件源。
    ie：window.event.srcElement
    标准下:event.target
    nodeName:找到元素的标签名
    */
    oUl.onmouseover = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        //alert(target.innerHTML);
        if(target.nodeName.toLowerCase() == "li"){
            target.style.background = "red";
        }
    }
    oUl.onmouseout = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        //alert(target.innerHTML);
        if(target.nodeName.toLowerCase() == "li"){
            target.style.background = "";
        }
    }
}

好处2，新添加的元素还会有之前的事件。
我们还拿这个例子看，但是我们要做动态的添加li。点击button动态添加li
如：

    
aaaaaaaa
    
bbbbbbbb
    
cccccccc

不用事件委托我们会这样做：

window.onload = function(){
    var oUl = document.getElementById("ul");
    var aLi = oUl.getElementsByTagName("li");
    var oBtn = document.getElementById("btn");
    var iNow = 4;
    for(var i=0; i

这样做我们可以看到点击按钮新加的li上面没有鼠标移入事件来改变他们的背景颜色。
因为点击添加的时候for循环已经执行完毕。
 
那么我们用事件委托的方式来做。就是html不变

window.onload = function(){
    var oUl = document.getElementById("ul");
    var aLi = oUl.getElementsByTagName("li");
    var oBtn = document.getElementById("btn");
    var iNow = 4;

    oUl.onmouseover = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        //alert(target.innerHTML);
        if(target.nodeName.toLowerCase() == "li"){
            target.style.background = "red";
        }
     }
    oUl.onmouseout = function(ev){
         var ev = ev || window.event;
         var target = ev.target || ev.srcElement;
         //alert(target.innerHTML);
         if(target.nodeName.toLowerCase() == "li"){
            target.style.background = "";
         }
     }
    oBtn.onclick = function(){
         iNow ++;
         var oLi = document.createElement("li");
         oLi.innerHTML = 1111 *iNow;
         oUl.appendChild(oLi);
     }
}

总结：
事件委托对于web应用程序的性能有如下几个优点：
1.需要管理的函数变少了
2.占用的内存少了
3.javascript代码和Dom结构之间的关联更少了
4.在改变DOM结构中的innerHTML时，不需要改动事件处理函数

从传统的事件处理方法转向事件委托提高了大型web应用的性能。正因为它如此的重要，一些类似于YUI、jQuey的javascript库也开始将事件委 托应用在它们的核心接口中。实现事件委托是很轻松的，却能带来性能上很大的提高。尤其表现在你将数十个事件处理函数整合到一个函数里。试一下事件委托，你 就不会再使用传统的事件处理方法了。