js事件委托（事件代理）

概述

那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同一个例子，就是取快递来解释这个现象，借花献佛，我摘过来，大家认真领会一下事件委托到底是一个什么原理：

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

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

第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的，该事件原本需要绑定在子元素，现在把事件委托给父元素，让父元素担当事件监听的职务。

第二，新员工也是可以被前台MM代为签收的，即程序中新添加的dom节点也是有事件的，新事件也是可以委托给父元素，让父元素担当事件监听的职务。

原理

事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

事件冒泡

前面提到事件委托的原理是DOM元素的事件冒泡，那么事件冒泡是什么呢？

一个事件触发后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段

捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”（capture phase），捕获阶段不会响应任何事件，如图；

目标阶段：在目标节点上触发，称为“目标阶段”
冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。事件委托即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层，如图；

基本实现

创建个ul里面包含3个li

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

每个li添加相同的点击事件,弹出666

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

上面的代码的意思很简单，相信很多人都是这么实现的，我们看看有多少次的dom操作，首先要找到ul，然后遍历li，然后点击li的时候，又要找一次目标的li的位置，才能执行最后的操作，每次点击都要找一次li；

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

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

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

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

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

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

用jequry来写的话更简单：

$(function() {
            $('ul').on("click", "li", function() {
                alert('666');
                alert($(this).index() + 1);
            })
        })

这样就进一步优化了代码，是不是感觉很不错。

好了谢谢大家观看，如果大家还是不太明白可以看 凌云之翼 的博客：https://www.cnblogs.com/liugang-vip/p/5616484.html