事件委托

aristark 发布于2019-08-20 14:11 / 2548人阅读

摘要：当有事件触发监听器时，检查事件的来源，排除非子元素事件。当要触发事件的标签里面还有其他标签时，不能正常的委托，因为或是里面的标签元素。

背景

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

原理

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

使用

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


    Item 1
    Item 2
    Item 3
    Item 4
    Item 5

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

window.onload = function(){
    var oUl = document.getElementById("ul");
    var aLi = oUl.getElementsByTagName("li");

    for(var i=0; i
但有时这些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/...

云服务器 idc机房托管委托事件事件委托事件委托c javascript事件委托

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81445.html

jQuery源码解析之你并不真的懂事件委托及target和currenttarget的区别

摘要：源码源码行被点击了点击了，即委托的事件被点击了优先添加委托，再添加其他即委托在上的事件数量在下标为的位置插入委托事件解析可以看到，是优先添加委托事件，再添加自身事件，触发事件的时候也是按这个顺序。 showImg(https://segmentfault.com/img/remote/1460000019419722); 前言：请先回顾下我之前写的一篇文章：JavaScript之事件委...

xcc3641 2019-08-05 17:13 评论0 收藏0
jQuery源码解析之你并不真的懂事件委托及target和currenttarget的区别

摘要：源码源码行被点击了点击了，即委托的事件被点击了优先添加委托，再添加其他即委托在上的事件数量在下标为的位置插入委托事件解析可以看到，是优先添加委托事件，再添加自身事件，触发事件的时候也是按这个顺序。 showImg(https://segmentfault.com/img/remote/1460000019419722); 前言：请先回顾下我之前写的一篇文章：JavaScript之事件委...

khs1994 2019-08-23 18:01 评论0 收藏0
简单说 JavaScript中的事件委托（上）

摘要：说明这篇文章说中的事件委托，这次先说一些比较基本的知识。第一段绑定了两次事件，第二段绑定了一次事件也就是说，原来在上绑定的事件，现在委托在了父元素上，而在上只需要绑定一次就可以了。我们用事件委托的方式，再来改改。说明这篇文章说JavaScript中的事件委托，这次先说一些比较基本的知识。事件委托是什么先来看看事件委托的概念事件委托就是利用事件冒泡，只指定一个事件处理程序，就...

yankeys 2019-08-05 12:41 评论0 收藏0
简单说 JavaScript中的事件委托（上）

摘要：说明这篇文章说中的事件委托，这次先说一些比较基本的知识。第一段绑定了两次事件，第二段绑定了一次事件也就是说，原来在上绑定的事件，现在委托在了父元素上，而在上只需要绑定一次就可以了。我们用事件委托的方式，再来改改。说明这篇文章说JavaScript中的事件委托，这次先说一些比较基本的知识。事件委托是什么先来看看事件委托的概念事件委托就是利用事件冒泡，只指定一个事件处理程序，就...

fireflow 2019-08-29 14:07 评论0 收藏0
简单说 JavaScript中的事件委托（上）

摘要：说明这篇文章说中的事件委托，这次先说一些比较基本的知识。第一段绑定了两次事件，第二段绑定了一次事件也就是说，原来在上绑定的事件，现在委托在了父元素上，而在上只需要绑定一次就可以了。我们用事件委托的方式，再来改改。说明这篇文章说JavaScript中的事件委托，这次先说一些比较基本的知识。事件委托是什么先来看看事件委托的概念事件委托就是利用事件冒泡，只指定一个事件处理程序，就...

SexySix 2019-08-21 18:29 评论0 收藏0
好文推荐：javascript: 事件委托解析

摘要：前言之前不太明白事件委托。看了这个帖子，跟着代码操作了一遍，终于明白了事件委托。推荐理由一步一步，渐进式分析来说明事件委托。为签收快递，有两种办法一是三个人在公司门口等快递二是委托给前台代为签收。前言：之前不太明白事件委托。看了这个帖子，跟着代码操作了一遍，终于明白了事件委托。所以转载。推荐理由：一步一步，渐进式分析来说明事件委托。什么叫事件委托呢？它还有一个名字叫事件代理 ...

Wuv1Up 2019-08-21 17:35 评论0 收藏0