事件委托

一、定义

JavaScript高级程序设计的话来讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。举一个网上通用的生活例子通俗说明解释一下：

• 有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

这里其实还有2层意思的：

• 第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；

• 第二，新员工也是可以被前台MM代为签收的，即程序中新添加的dom节点也是有事件的。

二、为什么要用事件委托

因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能。

三、事件委托的原理

事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

四、代码演示

<ul id="ul1">  //实现功能是点击li，弹出123：
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

window.onload = function(){
    var oUl = document.getElementById("ul1");
    oUl.onclick = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        if(target.nodeName.toLowerCase() == 'li'){
            alert(123);
            alert(target.innerHTML);
        }
    }
}

---

<div id="box">   //每个li被点击的效果都不一样        
    <input type="button" id="add" value="添加" />
    <input type="button" id="remove" value="删除" />
    <input type="button" id="move" value="移动" />
    <input type="button" id="select" value="选择" />
</div>

 window.onload = function(){
     var oBox = document.getElementById("box");
     oBox.onclick = function (ev) {
         var ev = ev || window.event;
         var target = ev.target || ev.srcElement;
         if(target.nodeName.toLocaleLowerCase() == 'input'){
             switch(target.id){
                 case 'add' :
                     alert('添加');
                     break;
                 case 'remove' :
                     alert('删除');
                     break;
                 case 'move' :
                     alert('移动');
                     break;
                 case 'select' :
                     alert('选择');
                     break;
             }
         }
     }           
}//用事件委托就可以只用一次dom操作

详细内容见 原文链接 写得非常好！