事件委托

事件委托就是为了提高性能，在一个页面上使用一个事件来管理多种类型的事件。

例如需要下面三个li上分别绑定不同的事件：

 Example Source Code

<ul id="box">
        <li id="c_border">蜗爱css -事件委托demo1-点我边框变红</li>
        <li id="c_height">蜗爱css -事件委托demo2-点我高度变高</li>
              <li id="c_back">蜗爱css -事件委托demo3-点我背景变色</li>
</ul>

[demo]

通常写法：

 Example Source Code

(function(){
         function $(id){return document.getElementById(id);}
         $('c_border').onclick = function(){
            this.style.cssText = "border:1px solid red";
            //this.style.border = "1px solid red";
         };
          $('c_height').onclick = function(){
            this.style.height = 40 + 'px';
         };
          $('c_back').onclick = function(){
            this.style.cssText = "background:#000;color:#fff;";
         };
    })()

事件委托写法：

 Example Source Code

(function(){
         function $(id){return document.getElementById(id);}
         oUl = $('box');
         oUl.onclick = function(ev){
            var ev = ev || window.event;  
            var target = ev.target || ev.srcElement;  
            switch(target.id){
                case "c_border":
                $('c_border').style.cssText = "border:1px solid red";
                break;
                case "c_height":
                $('c_height').style.height = 40 + 'px';
                break;
                case "c_back":
                $('c_back').style.cssText = "background:#000;color:#fff;";
                break;
            }
        }
    })()

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