深入剖析 JS 事件流：理解事件冒泡和事件委托

2023-10-20 21:34:11

前言
在 JavaScript 的王国里，事件扮演着至关重要的角色，它们连接着用户交互和应用程序响应。为了解开事件的奥秘，我们必须踏上事件流之旅，探究事件冒泡和事件委托的精髓。只有掌握了这些概念，我们才能创建出真正响应式且高效的 web 应用程序。

事件流：事件的旅程

当用户与网页交互时，浏览器会将这些交互视为事件。这些事件可以是单击、鼠标移动、键盘输入或任何其他动作。事件流了这些事件从触发点到被处理的路径。

事件冒泡 和事件捕获 是事件流的两种主要模式：

事件冒泡

在事件冒泡模式下，事件首先被触发元素（目标元素）接收。然后，它逐级向上冒泡到父元素、祖父母元素，直到到达文档本身。在此过程中，每个元素都有机会处理该事件。

示例：

<div id="parent">
  <button id="child">点击我</button>
</div>

<script>
  document.getElementById("parent").addEventListener("click", function() {
    console.log("父元素被点击");
  });

  document.getElementById("child").addEventListener("click", function() {
    console.log("子元素被点击");
  });
</script>

在这种情况下，当用户单击按钮时，"子元素被点击" 会首先打印，然后打印 "父元素被点击"，因为事件从子元素冒泡到父元素。

事件捕获

事件捕获与事件冒泡相反。事件首先被文档接收，然后逐级向下捕获到祖父母元素、父元素，最后到达目标元素。在此过程中，每个元素都有机会在事件到达目标元素之前处理该事件。

示例：

<div id="parent">
  <button id="child">点击我</button>
</div>

<script>
  document.getElementById("parent").addEventListener("click", function() {
    console.log("父元素被点击");
  }, true);

  document.getElementById("child").addEventListener("click", function() {
    console.log("子元素被点击");
  }, true);
</script>

在这种情况下，当用户单击按钮时，"父元素被点击" 会首先打印，然后打印 "子元素被点击"，因为事件从文档捕获到子元素。

事件委托：高效事件处理

事件委托是一种优化事件处理的强大技术。它将事件监听器附加到父元素，而不是直接附加到子元素。当子元素发生事件时，事件会冒泡到父元素，并由父元素上的事件监听器处理。

优势：

性能优化： 避免为每个子元素创建单独的事件监听器，从而减少内存消耗和提高性能。
代码简化： 将事件处理逻辑集中到一个地方，使代码更易于维护和理解。
动态元素支持： 当子元素动态添加到文档时，事件委托确保它们也能被处理，而无需手动附加事件监听器。

示例：

<div id="parent">
  <button class="child">点击我</button>
</div>

<script>
  document.getElementById("parent").addEventListener("click", function(e) {
    if (e.target.classList.contains("child")) {
      console.log("子元素被点击");
    }
  });
</script>