深入理解事件冒泡和事件捕获

在 Web 前端开发中，事件处理是一个常见的任务。了解事件冒泡和事件捕获是成为一个更好的前端开发者的关键一步。在本文中，我们将深入探讨这两个概念，同时提供一些简单易懂的代码示例。

事件冒泡

事件冒泡是指事件从最具体的元素开始，然后逐级向上传播到最不具体的元素。在 DOM 树中，它类似于泡泡从底部向上冒出。这意味着如果您单击一个按钮，与该按钮相关的所有父元素上都会触发单击事件。

让我们看一个例子：

  
    
  
  
    

      

        点击我
      
    
    
  

在这个示例中，当我们点击按钮时，控制台会显示：

按钮被点击
内层 div 被点击
外层 div 被点击

这是因为事件首先从按钮开始冒泡，然后传播到内层 div，最后到达外层 div。

事件捕获

与事件冒泡相反，事件捕获从最不具体的元素开始，然后逐级向下传播到最具体的元素。这就像捕获从顶部向下扩散一样。

让我们修改上面的示例，使用事件捕获：

      outer.addEventListener(
        "click",
        () => {
          console.log("外层 div 被点击 - 捕获阶段");
        },
        true
      );

      inner.addEventListener(
        "click",
        () => {
          console.log("内层 div 被点击 - 捕获阶段");
        },
        true
      );

      button.addEventListener(
        "click",
        () => {
          console.log("按钮被点击");
        },
        true
      );

通过将 true 作为第三个参数传递给 addEventListener，我们启用了事件的捕获阶段。现在，当我们再次点击按钮时，控制台会显示：

外层 div 被点击 - 捕获阶段
内层 div 被点击 - 捕获阶段
按钮被点击

事件冒泡和事件捕获的应用

理解事件冒泡和事件捕获对于处理复杂的交互非常重要。您可以使用这些概念来创建更灵活和可维护的代码，同时避免不必要的事件冲突。

例如，可以在包含多个按钮的父容器上监听点击事件，而不是在每个按钮上都添加单独的事件监听器。然后，您可以根据触发事件的目标来执行不同的操作。

希望本文对您有所帮助，也希望路过的大佬不吝赐教！