详解JavaScript事件委托与冒泡原理

通过JavaScript事件的冒泡来动态为元素绑定事件的方法称为事件委托（Event Delegation，也称为“事件代理”），是 JavaScript 中最热门的技术之一，在笔试和面试中是常考察的重点知识点，今天来详细介绍一下相关的原理知识。

1、事件捕获与事件冒泡

事件捕获与事件冒泡的经典原理图如下： alt

事件捕获

在事件捕获过程中，事件开始由不太具体的节点接收，然后逐级向下传播到最具体的节点。在这个过程中，事件相应的监听函数是不会被触发的，但是到达该目标元素节点后，会触发该元素的事件，如果没有绑定事件则不执行。

事件冒泡

在事件冒泡过程中，事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点或文档。它与事件捕获是个相反的过程。在这个过程中，如果有节点绑定了相应的事件处理函数，这些函数都会被触发。

防止事件冒泡的方法：

event.stopPropagation(); // 阻止了事件冒泡，但不会阻击默认行为
event.preventDefault(); // 阻止默认事件，比如a的跳转事件

2、事件委托

事件委托原理

事件委托的原理就是不给每个子节点单独设置事件监听器，而是设置在其父节点上，然后利用冒泡原理设置每个子节点。

事件委托的示例代码如下：

<!--
  请补全JavaScript代码，要求如下：
  1. 给"ul"标签添加点击事件
  2. 当点击某"li"标签时，该标签内容拼接"."符号。如：某"li"标签被点击时，该标签内容为".."
  注意：必须使用DOM0级标准事件（onclick）
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <ul>
      <li>.</li>
      <li>.</li>
      <li>.</li>
    </ul>
 
    <script type="text/javascript">
      // 补全代码
      document.getElementsByTagName("ul")[0].onclick = function (event) {
        console.lo***击了ul");
        let target = event.target;
        console.log(target);
        if (target) {
          target.innerHTML = target.innerHTML + ".";
        }
      };
    </script>
  </body>
</html>

在上述代码没有给每个li标签绑定事件，而是通过给ul标签绑定事件，然后判断target的形式（冒泡）来设置每个子节点相应的处理。

事件委托应用

为什么要使用事件委托？ 在 JavaScript 中，页面内事件处理程序的个数会直接影响页面的整体性能，因为每个事件处理程序都是对象，对象会占用内存，内存中的对象越多，页面的性能则越差。此外，事件处理程序需要与 DOM 节点进行交互，访问 DOM 的次数越多，引起浏览器重绘和重排的次数也就越多，从而影响页面的性能。而当页面中很多表格或列表需要添加事件时，如果逐个添加那就太麻烦了，但是使用事件委托就能极大的减少工作量，同时也能提高页面的性能。因此在开发中事件委托的应用是十分普遍的，大家要清楚的认识这一点。

知识补充说明：重绘是指当元素样式改变时，浏览器会根据元素的新样式重新绘制元素的外观。重排是指当 DOM 树的一部分发生变化时（例如元素尺寸改变），浏览器会重新创建 DOM 树