JS事件委托

    事件委托就是在一个页面上使用一个事件来管理多种类型的事件。    
    通常情况，你会在web应用程序中看到这样的代码：

    document.getElementById("help-btn").onclick=function(event){openHelp();};            
    document.getElementById("save-btn").onclick=function(event){saveDocument();};
    document.getElementById("sundo-btn).onclick=function(event){undoChanges();};

    这种传统的编码方式给每个元素分配单独的事件处理方法。对于交互少的站点来说，这样做是可以的。然而，对于大型的web应用程序，当存在大量的事件处理的时候，就会显得反应迟钝。这里要关注的不是速度问题，而是内存占用问题。如果有数百个交互，DOM元素和JavaScript代码就会有数百个关联。 web应用需要占用的内存越多，它的响应速度就越慢。事件委托能将这个问题减小。
     通过冒泡实现事件委托事件委托的关键就是在通过冒泡方式实现在最高层(通常是document)处理事件。不是所有的事件都支持冒泡，但是鼠标和键盘事件支持，并且这也是你所关心的。回顾下前面的例子，你可以通过在document上分配一个事件来处理所有的单击事件，只需要通过区别节点来决定处理事件的方法。

document.onclick=function(event){       

    //IE doesn't pass in the event object

      event=event||window.event;   

    //IE uses srcElement as the target     

    var  target = event.target||event.srcElement;               

    switch(target.id){               

        case "help-btn":
               openHelp();                       

               break;        
        case  "save-btn":

               saveDocument();                       

               break;               

       case  "undo-btn":

               undoChanges();                      

               break;     

    //others? 

        }

};

    mousedown,mouseup,mousemove,mouseover,mouseout,dblclick,keyup,keydown, 和keypress事件也可以这样处理。但是，在事件委托中mouseover和mouseout的处理方法是不同的，当鼠标从一个元素移动到它的子元素内的时候，被认为是"out"。

    注意：你也可以使用事件捕获来完成事件委托，但这只能用在支持事件捕获的非IE浏览器中。

优点 

事件委托对于web应用程序的性能有如下几个优点：

1.需要管理的函数变少了 

2.占用的内存少了 

3.javascript代码和Dom结构之间的关联更少了 

4.在改变DOM结构中的innerHTML时，不需要改动事件处理函数

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