事件委托

2024年2月26日 116次阅读 来源: mydef

背景

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

原理

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

使用

假定我们有一个UL元素，它有几个子元素：

<ul id="parent-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

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

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元素可能会被删除，可能会有新增，监听它们的新增或删除事件将会是一场噩梦，尤其是当你的监听事件的代码放在应用的另一个地方时。但是，如果你将监听器安放到它们的父元素上呢？你如何能知道是那个子元素？

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

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

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 = "";
        }
    }
}

总结

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

优点：

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

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

缺点：

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

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

    原文作者：mydef
    原文地址: https://segmentfault.com/a/1190000008286211
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞