事件委托与事件代理

JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件，用取快递的例子来解释就是：

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

为什么要用事件委托?

一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？

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

每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了（内存不够用，是硬伤，哈哈），比如上面的100个li，就要占用100个内存空间，如果是1000个，10000个呢，那只能说呵呵了，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，是不是省了很多，自然性能就会更好。

事件委托的原理：

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

事件委托的实现：

一般情况下实现点击事件 —> 点击li, 弹出123

<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick = function(){
            alert(123);
        }
    }
}

首先要找到ul，然后遍历li，然后点击li的时候，又要找一次目标的li的位置，才能执行最后的操作，每次点击都要找一次li。

使用事件委托时的方法: 为父级增加点击事件，通过事件冒泡实现点击效果

window.onload = function(){
    var oUl = document.getElementById("ul1");
   oUl.onclick = function(){
        alert(123);
    }
}

这里用父级ul做事件处理，当li被点击时，由于冒泡原理，事件就会冒泡到ul上，因为ul上有点击事件，所以事件就会触发，当然，这里当点击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);
　　　　}
　　}
}

Event对象提供了一个属性叫target，可以返回事件的目标节点，称之事件源。target可以表示为当前的事件操作的dom，但并不是真正操作dom，当然是有兼容性的，标准浏览器用ev.target，IE用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里用nodeName来获取具体是什么标签名，返回的是一个大写，转成小写再做比较，改过之后，只有点击li才会触发事件，但DOM操作只有一次。

不同的li执行不同的点击操作：

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;
                    }
                }
            }
}

以上都是document加载完成的现有dom节点下的操作，新增节点的事件代理如何操作？

一般处理新增节点的事件多使用循环添加节点后再次查找节点并添加事件，例如：

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

      function mHover () {
          //鼠标移入变红，移出变白
          for(var i=0; i<aLi.length;i++){
              aLi[i].onmouseover = function(){
                  this.style.background = 'red';
              };
              aLi[i].onmouseout = function(){
                  this.style.background = '#fff';
              }
          }
      }
      mHover ();
      //添加新节点
      oBtn.onclick = function(){
          num++;
          var oLi = document.createElement('li');
          oLi.innerHTML = 111*num;
          oUl.appendChild(oLi);
          mHover ();
      };
}

采用事件代理优化后:

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

      //事件委托，添加的子元素也有事件
      oUl.onmouseover = function(ev){
          var ev = ev || window.event;
          var target = ev.target || ev.srcElement;
          if(target.nodeName.toLowerCase() == 'li'){
              target.style.background = "red";
          }

      };
      oUl.onmouseout = function(ev){
          var ev = ev || window.event;
          var target = ev.target || ev.srcElement;
          if(target.nodeName.toLowerCase() == 'li'){
              target.style.background = "#fff";
          }

      };

      //添加新节点
      oBtn.onclick = function(){
          num++;
          var oLi = document.createElement('li');
          oLi.innerHTML = 111*num;
          oUl.appendChild(oLi);
      };
 }