DOM 之事件委托

没错就是这

已于 2022-08-25 20:19:12 修改

阅读量233

点赞数

分类专栏：前端知识 JS 文章标签：前端 javascript html

于 2022-08-25 20:13:51 首次发布

本文链接：https://blog.csdn.net/m0_48839439/article/details/126531454

版权

前端知识同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

在 js中，页面中事件处理程序的数量与页面整体性能直接相关。只要在使用事件处理程序时多注意一些方法，就可以改善页面性能。

一、事件委托是什么？

事件委托是当事件触发时，把要做的事委托给父元素（或父元素的父元素）来处理。

利用冒泡原理把事件加到父级上，通过判断事件来源的子集，执行相应的操作。

事件委托能对特定的每一个节点添加触发事件监听器。

二、事件委托的应用

如（当点击大写字母时会出现对应小写字母）：

<body>
    <ul id="abc">
      <li id="A">A</li>
      <li id="B">B</li>
      <li id="C">C</li>
    </ul>
    <script>
      var abc = document.getElementById("abc");
      abc.addEventListener("click", function (event) {
        var target = event.target;
        console.log(target);
        switch (target.id) {
          case "A":
            target.innerHTML = 'a';
            break;
          case "B":
            target.innerHTML = 'b';
            break;
          case "C":
            target.innerHTML = 'c';
            break;
        }
      });
    </script>
</body>

以上例子是使用事件委托来完成，当点击子元素，事件触发会冒泡到父元素触发，也就是事件委托，此时执行父元素事件。执行父元素事件时，利用switch方法通过辨别所点击的子元素id，从而判断要发生哪一子元素所需的事件结果。

这样只是触发了父元素的一个事件，只用在一个节点添加事件。不会像原始的方法，对每一子元素都创建一个相似的事件，减少代码对相似事件冗余的编写。这种方式占用内存更少，所有使用按钮的事件（大多数鼠标事件和键盘事件）都适用于这个解决方案。

三、事件委托的优点

只要可行，就应该考虑只给 document 添加一个事件处理程序，通过它处理页面中所有某种类型的事件。

事件委托的优点：

document 对象随时可用，任何时候都可以给它添加事件处理程序（不用等待 DOMContentLoaded或 load 事件）。这意味着只要页面渲染出可点击的元素，就可以无延迟地起作用。
节省花在设置页面事件处理程序上的时间。只指定一个事件处理程序既可以节省 DOM 引用，也可以节省时间。
减少整个页面所需的内存，提升整体性能。

最适合使用事件委托的事件包括：click、mousedown、mouseup、keydown 和 keypress。