js中事件委托或事件代理机制

   在JS高程中是这样解释的：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

通俗来讲就是：
事件， 就是onclick，onmouseover，onmouseout，等就是事件;
委托，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。

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

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

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

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

为什么要用事件委托：

<h3> 1：提高性能</h3>
一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？
在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；
每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了，比如上面的100个li，就要占用100个内存空间，如果是1000个，10000个呢，那只能说呵呵了，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，是不是省了很多，自然性能就会更好。

<h3> 2.新添加的元素还会有之前的事件。</h3>

case:

 <input type="button" id="btn" />
    <ul id="ul">
     <li>aaaaaaaa</li>
     <li>bbbbbbbb</li>
     <li>cccccccc</li>
   </ul> 

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

 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<aLi.length; i++){
    aLi[i].onmouseover = function(){
    this.style.background = "red";
  }
  aLi[i].onmouseout = function(){
  this.style.background = "";
    }
  }
  oBtn.onclick = function(){
  iNow ++;
  var oLi = document.createElement("li");
  oLi.innerHTML = 1111 *iNow;
  oUl.appendChild(oLi);
  }
}

这样做我们可以看到点击按钮新加的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);
   }
}

<h3>3.事件委托的原理：</h3>

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

<h3>4.事件委托如何实现</h3>

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

用事件委托的方式：

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

这里用父级ul做事件处理，当li被点击时，由于冒泡原理，事件就会冒泡到ul上，因为ul上有点击事件，所以事件就会触发，当然，这里当点击ul的时候，也是会触发的，那么问题就来了，如果我想让事件代理的效果跟直接给节点的事件效果一样怎么办，比如说只有点击li才会触发，我们可以这样来实现：

Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名

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

这样改下就只有点击li会触发事件了，且每次只执行一次dom操作，如果li数量很多的话，将大大减少dom的操作，优化的性能可想而知！

要是每个li被点击的效果都不一样，那么用事件委托还有用吗？

  <div id="box">
    <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>

<h3></h3>

  window.onload = function(){
        var Add = document.getElementById("add");
        var Remove = document.getElementById("remove");
        var Move = document.getElementById("move");
        var Select = document.getElementById("select");
        
        Add.onclick = function(){
            alert('增加');
        };
        Remove.onclick = function(){
            alert('删除');
        };
        Move.onclick = function(){
            alert('移动');
        };
        Select.onclick = function(){
            alert('选择');
        }
        
    }

上面实现的效果4个按钮，点击每一个做不同的操作，那么至少需要4次dom操作，如果用事件委托，可以进行优化。

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