事件代理（事件委托）

最新推荐文章于 2024-07-14 15:54:59 发布

心之所向_gp

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量70

点赞数 1

分类专栏： javascript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_55182699/article/details/120277171

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

事件代理（事件委托）的原理：

利用冒泡机制把所需要相应的事件绑定到外层，就是不给每个子节点单独设置事件监听器，而是设置在其父节点上，然后利用冒泡原理设置每个子节点

实现例子：

<body>
    <ul id="list">
        <li>1111111</li>
        <li>22222222</li>
        <li>43333</li>
    </ul>
    <script>
      window.onload = function(){
       var oUl = document.getElementById("list");
       oUl.onclick = function(){
        alert("haha");
        }
    }
    </script>
</body>

理解：

最近有看到了一个很好比喻，就借花献佛引用一下来通俗的理解

有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

为什么要用事件委托呢？

每一个事件处理函数，都是一个对象，多一个事件处理函数，内存中就会被多占用一部分空间。如果要用事件委托，就会将所有的操作放到 js 程序里面，只对它的父级进行操作，与 dom 的操作就只需要交互一次，这样就能大大的减少与 dom 的交互次数，提高性能；比如上面的3个li，就要占用3个内存空间，如果是1000个，10000个呢，那~~~，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，自然性能就会更好。

心之所向_gp

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件代理（事件委托）

事件代理（事件委托）的原理：利用冒泡机制把所需要相应的事件绑定到外层，就是不给每个子节点单独设置事件监听器，而是设置在其父节点上，然后利用冒泡原理设置每个子节点实现例子：<body> <ul id="list"> <li>1111111</li> <li>22222222</li> <li>43333</li> </ul>
复制链接

扫一扫