js中的事件委托或事件代理

Posted 2020-10-14 30号

一，概述

　　javascript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

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

二，原理

　　事件委托是利用事件的冒泡原理实现的。事件冒泡的定义：事件从最深的节点开始，然后逐步向上传播事件。

　　举例：一个节点树，div>ul>li>a，当我们给标签a添加一个click事件，当我们点击a标签的时候，事件就会按照a>li>ul>div一层一层像冒泡一样往外执行。所以如果我们在最外层的div上绑定一个click事件，那么当我们点击div中的ul， li， a的时候，都会冒泡到div上，触发最外层div上的click事件。这就是事件委托，委托父级标签代为执行事件。

三，实现

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

　　用事件委托的方式实现点击li时分别弹出对应的li中的内容。Event对象提供了一个属性叫target，可以返回事件的目标节点。也就是说target可以表示为当前事件操作的DOM，但是不是真正的DOM。这个地方有一个浏览器兼容的问题，那就是标准浏览器用ev.target，IE浏览器用event.srcElement。这个时候我们就可以用target.nodeName获取标签名。这个地方有一个小坑，target.nodeName的返回是大写的，我们可以将其转为小写的在做比较。下面直接贴代码

window.onload = function(){
  var ulObj = document.getElementById("ul1");
  ulObj.onclick = function(ev){
    　　var ev = ev || window.event;
　　 　　var target = ev.target || ev.srcElement;
　　 　　if (target.nodeName.toLowerCase() == ‘li‘){
　　　　　　alert(target.innerhtml);
　　　　}
　　}
}

四，使用事件委托的好处

　　性能优化的主要方法之一就是减少DOM操作的次数。使用事件委托根本不需要去遍历元素的子节点，只需在父级元素上添加事件，只需与DOM交互一次，然后将所有的操作放到js程序里面，这样就能大大减少与DOM的交互次数，提高性能。而且，减少函数的个数，也可以减少内存占用率。