什么是 JavaScript 中的事件冒泡和捕获？

事件是现代网络的基本构造。它们是一组特殊的对象，允许发出网站内发生某事的信号。通过定义事件侦听器，开发人员可以在事件发生时运行特定代码。这允许在 Web 应用程序上实现复杂的控制逻辑。

每次您按下一个键、单击一个按钮或点击您的手机时，浏览器都会发送一个事件。更重要的是，您可以定义自己的事件并随意调度它们！这从模拟用户的击键到自定义域特定事件。

可以想象，了解事件的工作方式和行为方式是构建强大的现代 Web 应用程序的关键。以及作为熟练的 Web 开发人员要掌握的关键概念。

示例 1：假设我们有以下 HTML 文档。该文档呈现嵌套在两个不同div中的单个按钮，每个元素附加一个事件处理程序，当检测到“单击”事件时将调用该事件处理程序。尝试运行它，单击按钮，然后检查您的开发者工具控制台。

HTML

 

    
    
    

 

    

        

            
                Click me!
            
        
    

 

输出：输出将按以下顺序显示在控制台上。

示例 1 的输出

所以发生了什么事？您单击了按钮，但控制台中仍打印了三个日志。有几件事正在发生，让我们来解决它们。

创建事件

每当您与 DOM 元素交互时，浏览器都会创建一个新的 DOM 事件。在这种情况下，当点击按钮时，浏览器会组成一个特定的 DOM 事件： PointerEvent 。 以下是它的一些属性。

{
  target: button.button,
  type: "click",
  x: 33,
  y: 9,
  ...
}

请注意type属性是如何设置为“click”的，表明该事件表示鼠标单击（相反，例如，在键盘上按一次键）。

调度事件

创建 Event 对象后，浏览器会调度它。然后该事件以所谓的Event Propagation遍历 DOM。事件传播过程分为三个阶段。

通过示例 DOM 的“点击”事件的事件传播

1. 捕获阶段：事件从 DOM 的根开始，开始向下遍历树，直到找到触发事件的元素。对于它遍历的每个元素，它会检查是否有一个事件侦听器，其捕获标志设置为 true，并附加到它上面。如果没有，它只是忽略它。请注意，在我们的示例中，我们在控制台中看到的第一条日志消息是按钮消息。这是因为，默认情况下，事件侦听器不会在捕获阶段侦听事件。
   
2. 目标阶段：事件到达目标元素，并运行附加到它的事件侦听器（如果有）。在我们的示例中，此阶段在控制台中为我们提供了第一条消息：“按钮”
   
3. 冒泡阶段：与捕获阶段类似，事件将遍历 DOM 检查事件侦听器，但这次它将从调度事件的元素开始，并在 DOM 的根（ html元素）结束。正是在这个阶段，我们得到了示例中的日志“容器”和“按钮列表”，因为它们是按顺序最接近按钮的祖先！请注意，默认情况下，事件侦听器将在此阶段被调用。

监听事件

有几种方法可以监听通过 DOM 的事件。在文章的例子中，我们使用了“ onclick ” 事件属性。这种监听事件的方法很简单，但不是太通用。最通用、规范有效的方法是使用元素的 Javascript 方法“ addEventListener ”。这是它的工作原理。

要附加事件侦听器，请在元素上调用“ addEventListener ”，并使用以下签名。

element.addEventListener(type, handler, useCapture);

• type ：这是您要收听的 Event 类型，由其type属性定义。如前所述，在示例文档中，触发事件的类型值为“click”。
• handler ：这是对 javascript函数的引用，该函数将在事件通过 DOM 时运行（在正确的阶段）
• useCapture ：这是一个布尔值，指示在哪个事件传播阶段，事件侦听器应触发事件处理程序。如果设置为 true，侦听器将在Capture阶段调用处理程序。否则，它将在默认的冒泡阶段被调用。

示例 2：让我们用另一个示例进行测试。使用此代码更新示例文档。在这里，我们删除了列表和容器的事件属性，并将两个不同的事件侦听器附加到文档中：一个在捕获阶段，一个在冒泡阶段。现在，打开文档并单击按钮。

HTML

 

    
    
    
        GeeksForGeeks: What is Event
        Bubbling and Capturing
    

 

    
        
            
                Click me!
            
        
    
    
        document.addEventListener("click", () =>
            console.log('Capture!'), true);
        document.addEventListener("click", () =>
            console.log('Bubbling!'), false);
    

 

输出：输出将按以下顺序显示在控制台上。

示例 2 的输出

如您所见，事件按照事件传播过程定义的预期顺序进行处理。

处理通过 DOM 的事件传播

有几个 Event 方法可以控制事件在 DOM 树中的传播。

通过调用 event.stopPropagation() 停止事件传播

• event.preventDefault() ：停止该事件的默认浏览器行为。
• event.stopPropagation() ：停止事件在下一个元素上的传播（无论是 Capture 阶段的后代，还是 Bubbling 阶段的祖先）
• event.stopImmediatePropagation() ：类似于“ event.stopPropagation()” ，但也会停止同一元素中其他侦听器的传播。

结论

在本文中，我们了解了事件是什么，它们何时被浏览器触发，以及它们如何通过 DOM 传播以由不同的事件侦听器处理。现在是时候了解更多关于事件以及如何处理它们的信息了。