事件委托

目录

 

1、什么是事件委托？

2、事件委托的步骤

3、事件委托的应用

---

1、什么是事件委托？

事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown......）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

举例：
一个宿舍的快递同时到了，一种方法就是他们一个个去领取，还有一种方法就是把这件事情委托给宿舍长，让一个人出去取完所有快递，然后再根据收件人一 一分发给每个宿舍同学；
在这里，取快递就是一个事件，每个同学指的是需要响应事件的 DOM 元素，宿舍的同学发布任务属于委托方，而出去统一领取快递的宿舍长就是代理的元素，宿舍长执行任务，是代理方。所以真正绑定事件的是宿舍长这个元素。按照收件人分发快递的过程就是在事件执行中，需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。

当用事件委托的时候，根本就不需要去遍历元素的子节点，只需要给父级元素添加事件就好了，其他的都可以在js里面执行，这样可以大大的减少dom操作，这是事件委托的精髓。

2、事件委托的步骤

1. 找到当前节点的父节点或祖先节点
2. 将事件添加到找到的这个父节点或祖先节点上
3. 找到触发对象，判断触发对象是否是想要的触发对象，进行后续操作

3、事件委托的应用

应用：子节点实现相同的功能，点击li元素改变颜色为红色

（1）普通实现

 var ul=document.getElementById("ul");
        var li=document.getElementsByTagName("li");
        for(var i=0;i<li.length;i++){
           li[i].onclick=function(){
                this.style.backgroundColor="red"
            }
        }

（2）用事件委托实现

li委托ul实现li元素自身的颜色改变

用父级ul做事件处理，当点击li的时候，由于冒泡原理，事件就冒泡的ul上。但是点击ul的时候也会触发事件。我们用event提供的target来解决(IE中是srcElement)来获取节点的位置，我们并不知道节点的名字是什么，可以用nodeName来获取具体的标签名，这是返回的是大写，我们做好转化成小写来进行比较。

 var ul=document.getElementById("ul");
        ul.onclick=function(ev){
            var e=ev||window.event;
            var target=target||window.event.srcElement;//获取触发对象
            // alert(target.nodeName)//LI
            if(target.nodeName.toLowerCase()=="li"){
                target.style.backgroundColor="red";
            }
        }

 代码解析：

• target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
• IE下,event对象有srcElement属性,但是没有target属性； Firefox下,event对象有target属性,但是没有srcElement属性。两者作用是相当的。

这样写的话只有点击li的时候会触发事件，点击ul的时候不会。
在FireFox浏览器中，事件绑定的函数要获取到事件本身，需要从函数中传入，而IE等浏览器则可以直接使用event或者window.event得到事件本身。

总结：

事件委托只执行一次DOM操作就完成所有效果，对比一般节点操作（需要遍历子节点Li，去执行触发了点击事件的子节点li），明显的性能更好。