委托解决冒泡

什么是委托

委托，从字面意思上来讲就是托付给他人代为完成，有点抽象。
那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
网上的前端大佬呢都是用去快递的案例来解释，这边就借花献佛，就用这个例子吧。有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

为什么要用事件委托

在我们使用js操控DOM时，时间是默认冒泡触发的，就是时间从内而外，逐级进行触发，这样会加大程序运行时间，造成程序堵塞。
用事件委托的方式绑定事件时，会将子元素的事件绑定个他的父级代为执行，但是事件委托的本质其实也是冒泡，因为它是将子元素的事件冒泡到了父元素。这样在程序运行的过程中呢，就不会进行由内到外的逐级触发，可以大大的缩短程序的运行事件

怎样使用委托

现在我们先看一个例子

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

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

这里呢我们要实现是点击li，弹出123。
相信很多人都是这么实现的，我们看看有多少次的dom操作，首先要找到ul，然后遍历li，然后点击li的时候，又要找一次目标的li的位置，才能执行最后的操作，每次点击都要找一次li；

那么我们用事件委托的方式做又会怎么样呢？

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

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