查看: 818|回复: 0

[JavaScript/JQuery] 事件委托

发表于 2017-4-20 08:00:01
背景

在JS中,添加到页面上的事件处理程序都会占用内存,内存占用的越多性能就越差,且必须事先就指定好所有的事件处理程序而导致的DOM访问次数的增加会延迟整个页面的交互就绪时间。特别是对table的td和ul的li的事件处理,如果是给大量子元素添加事件,会占用大量内存。事件处理程序绑定的越多越影响性能,但是又不能说不绑定事件,所以我们需要一种方法来减少绑定的事件,使用事件委托。

原理

在触发DOM上的某个事件的时候,就会产生一个事件对象event,这个对象中包含着所有与事件有关的信息,其中包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。避免对特定的每个节点添加事件监听器;相反,事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件。

使用

假定我们有一个UL元素,它有几个子元素:

  1. <ul id="parent-list">
  2. <li>Item 1</li>
  3. <li>Item 2</li>
  4. <li>Item 3</li>
  5. <li>Item 4</li>
  6. <li>Item 5</li>
  7. </ul>
复制代码

假设,需要触发每个li来改变他们的背景颜色,你可以给每个独立的li元素添加事件监听器。

  1. window.onload = function(){
  2. var oUl = document.getElementById("ul");
  3. var aLi = oUl.getElementsByTagName("li");
  4. for(var i=0; i<aLi.length; i++){
  5. aLi[i].onmouseover = function(){
  6. this.style.background = "red";
  7. }
  8. aLi[i].onmouseout = function(){
  9. this.style.background = "";
  10. }
  11. }
  12. }
复制代码

但有时这些li元素可能会被删除,可能会有新增,监听它们的新增或删除事件将会是一场噩梦,尤其是当你的监听事件的代码放在应用的另一个地方时。但是,如果你将监听器安放到它们的父元素上呢?你如何能知道是那个子元素?

简单:当子元素的事件冒泡到父ul元素时,你可以检查事件对象的target属性,捕获真正节点元素的引用。

第一步是给父元素添加事件监听器。当有事件触发监听器时,检查事件的来源,排除非li子元素事件。如果是一个li元素,我们就找到了目标!如果不是一个li元素,事件将被忽略。

  1. window.onload = function(){
  2. var oUl = document.getElementById("ul");
  3. var aLi = oUl.getElementsByTagName("li");
  4. /*
  5. 这里要用到事件源:event 对象,事件源,不管在哪个事件中,只要你操作的那个元素就是事件源。
  6. ie:window.event.srcElement
  7. 标准下:event.target
  8. nodeName:找到元素的标签名
  9. */
  10. oUl.onmouseover = function(ev){
  11. var ev = ev || window.event;
  12. var target = ev.target || ev.srcElement;
  13. //alert(target.innerHTML);
  14. if(target.nodeName.toLowerCase() == "li"){
  15. target.style.background = "red";
  16. }
  17. }
  18. oUl.onmouseout = function(ev){
  19. var ev = ev || window.event;
  20. var target = ev.target || ev.srcElement;
  21. //alert(target.innerHTML);
  22. if(target.nodeName.toLowerCase() == "li"){
  23. target.style.background = "";
  24. }
  25. }
  26. }
复制代码
总结

委托(代理)事件是那些被绑定到父级元素的事件,但是只有当满足一定匹配条件时才会被挪。这是靠事件的冒泡机制来实现的。

优点:

可以大量节省内存占用,减少事件注册,比如在table上代理所有td的click事件就非常棒

可以实现当新增子对象时无需再次对其绑定事件,对于动态内容部分尤为合适

缺点:

事件代理的应用常用应该仅限于上述需求下,如果把所有事件都用代理就可能会出现事件误判,即本不应用触发事件的被绑上了事件。当要触发事件的标签里面还有其他标签时,不能正常的委托,因为target或srcElemt是里面的标签元素。

参考文章
http://www.webhek.com/event-d...
http://blog.csdn.net/jinboker...
http://blog.csdn.net/leo8729/...



回复

使用道具 举报