事宜托付

2024年5月13日 202次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞