js事件委托(事件代理)的原理以及优缺点

js事件委托/事件代理的原理以及优缺点

什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。也就是利用冒泡的原理，把事件加到父级上，触发执行效果。

好处1: 提高性能

我们可以看一个例子：需要触发每个li来改变他们的背景颜色。

<ul id="ul"><li>aaaaaaaa</li><li>bbbbbbbb</li><li>cccccccc</li>
</ul>

window.onload = function(){var oUl = document.getElementById("ul");var aLi = oUl.getElementsByTagName("li");for(var i=0; i<aLi.length; i++){aLi[i].onmouseover = function(){this.style.background = "red";}aLi[i].onmouseout = function(){this.style.background = "";}}
}

这样我们就可以做到li上面添加鼠标事件。但是如果说我们可能有很多个li用for循环的话就比较影响性能。

下面我们可以用事件委托的方式来实现这样的效果。html不变

window.onload = function(){var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
/*
这里要用到事件源：event 对象，事件源，不管在哪个事件中，只要你操作的那个元素就是事件源。
ie：window.event.srcElement
标准下:event.target
nodeName:找到元素的标签名
*/
oUl.onmouseover = function(ev){var ev = ev || window.event;var target = ev.target || ev.srcElement;//alert(target.innerHTML);if(target.nodeName.toLowerCase() == "li"){target.style.background = "red";}
}
oUl.onmouseout = function(ev){var ev = ev || window.event;var target = ev.target || ev.srcElement;//alert(target.innerHTML);if(target.nodeName.toLowerCase() == "li"){target.style.background = "";}
}
}

好处2: 新添加的元素还会有之前的事件。

我们还拿这个例子看，但是我们要做动态的添加li。点击button动态添加li

<input type="button" id="btn" />
<ul id="ul"><li>aaaaaaaa</li><li>bbbbbbbb</li><li>cccccccc</li>
</ul>

不用事件委托我们会这样做：

window.onload = function(){var oUl = document.getElementById("ul");var aLi = oUl.getElementsByTagName("li");var oBtn = document.getElementById("btn");var iNow = 4;for(var i=0; i<aLi.length; i++){aLi[i].onmouseover = function(){this.style.background = "red";}aLi[i].onmouseout = function(){this.style.background = "";}}oBtn.onclick = function(){iNow ++;var oLi = document.createElement("li");oLi.innerHTML = 1111 *iNow;oUl.appendChild(oLi);}
}

这样做我们可以看到点击按钮新加的li上面没有鼠标移入事件来改变他们的背景颜色。
因为点击添加的时候for循环已经执行完毕。

那么我们用事件委托的方式来做。就是html不变

window.onload = function(){var oUl = document.getElementById("ul");var aLi = oUl.getElementsByTagName("li");var oBtn = document.getElementById("btn");var iNow = 4;oUl.onmouseover = function(ev){var ev = ev || window.event;var target = ev.target || ev.srcElement;//alert(target.innerHTML);if(target.nodeName.toLowerCase() == "li"){target.style.background = "red";}}oUl.onmouseout = function(ev){var ev = ev || window.event;var target = ev.target || ev.srcElement;//alert(target.innerHTML);if(target.nodeName.toLowerCase() == "li"){target.style.background = "";}}oBtn.onclick = function(){iNow ++;var oLi = document.createElement("li");oLi.innerHTML = 1111 *iNow;oUl.appendChild(oLi);}
}

优缺点
- 优点：
  - 1.可以大量节省内存占用，减少事件注册。比如ul上代理所有li的click事件就很不错。
  - 2.可以实现当新增子对象时，无需再对其进行事件绑定，对于动态内容部分尤为合适
- 缺点：
  - 事件代理的常用应用应该仅限于上述需求，如果把所有事件都用事件代理，可能会出现事件误判。即本不该被触发的事件被绑定上了事件。

js事件委托(事件代理)的原理以及优缺点相关推荐

JQuery 之事件委托(事件代理)
事件委托/事件代理: 事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操事件委托的写法: $(选择器).delegate( 事件真实发生在谁身上, 事件属性,匿名函 ...
JS中的事件委托/事件代理详解
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
js事件委托(事件代理)
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
事件委托的概念和原理
事件委托优点减少DOM操作的,减少浏览器的重绘(repaint)和重排(reflow),从而提高性能: 减少内存空间的占用率,因为每一个函数都是一个对象,对象越多,内存占有率就越大,自然性能就越差, ...
事件委托（代理/委派）
事件委托也叫事件代理,jQuery中叫事件委派事件委托就是不给每个子元素设置事件侦听器,而是给其父元素设置事件侦听器,然后利用冒泡阶段的原理影响每个子节点给ul绑定注册事件,点击 li 标签后会冒 ...
事件传播机制/事件委托/事件代理
事件传播机制分为三个阶段: 第一阶段:从window对象传导到目标节点,称为"捕获阶段" 第二阶段:在目标节点上触发,称为"目标阶段" 第三阶段:从目标节点传导 ...
详解js中EventListener监听器（事件委托/事件代理）
监听器: 语法: addEventListener(event,function,userCapture) 方法第一个参数写事件句柄,不需要加"on",直接写时间名就可以(如:c ...
JS 事件代理和事件委托
目录事件委托的概念理解为什么要用事件委托事件委托的原理: 事件代理(委托)实现总结: 事件委托的概念理解为什么叫事件委托?它还有一个名字叫事件代理. JavaScript高级程序设计上讲:事 ...
JS事件委托的概念和作用
一.写在前头接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗?然后我就混乱了,我印象中这个方法是可以绑定新节点的.后面 ...

js事件委托(事件代理)的原理以及优缺点

js事件委托/事件代理的原理以及优缺点

js事件委托(事件代理)的原理以及优缺点相关推荐

最新文章

热门文章