彻底弄懂事件委托

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

举例说明：

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

Why we use❓

先看一段代码

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

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

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

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

事件委托触发相同事件

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

这里用父级ul做事件处理，当li被点击时，由于冒泡原理，事件就会冒泡到ul上，因为ul上有点击事件，所以事件就会触发，这里是用ul的点击达到同样的效果那么问题来了，如果单纯的点击ul也会触发li本该触发的事件，更精确点，我们只想要li点击时才触发事件怎么办？继续往下走...

Event对象提供了一个属性叫target，可以返回事件的目标节点，我们称为事件源，也就是说，target就可以表示为当前的事件操作的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操作的是同样的效果，要是每个li被点击的效果都不一样，那么用事件委托还有用吗？答案是肯定的，如果有标记的话😁

未使用委托：4个按钮，点击每一个做不同的操作，那么至少需要4次dom操作，

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

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('选择');
   }

}

使用委托：可以只用一次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;
                }
            }
        }

    }

关于动态添加新元素

未使用事件委托

for(var i=0; i<aLi.length;i++){
    aLi[i].onclick = function(){
        this.style.background = 'red';
    };
}
//添加新节点
oBtn.onclick = function(){
    var oLi = document.createElement('li');
    oLi.innerHTML = 111*num;
    oUl.appendChild(oLi);
};

这是一般的做法，你会发现，新增的li是没有点击事件的

使用事件委托

oUl.onclick = function(ev){
  var ev = ev || window.event;
  var target = ev.target || ev.srcElement;
  if(target.nodeName.toLowerCase() == 'li'){
      target.style.background = "red";
  }
};
oBtn.onclick = function(){
  var oLi = document.createElement('li');
  oLi.innerHTML = 111*num;
  oUl.appendChild(oLi);
};

这里你会发现，新添加的li元素无需做其他操作，已有点击事件

事件委托适用场景

适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。
不适合使用的事件：mouseover,mouseout和mousemove,因为不是单纯地点击等操作，每次触发都需要重新计算一下位置，处理起来也不是很方便，就不用喽
focus，blur之类的，本身就没用冒泡的特性，自然就不能用事件委托了。

OVER

2016-12-23