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

前端

2023-11-22 14:40:48

前言

在网页开发中，事件扮演着至关重要的角色，它赋予页面响应用户交互的能力。理解事件的流动机制对于构建交互式且用户友好的应用程序至关重要。本文将深入探讨事件流的两个关键概念：事件冒泡和事件捕获。

事件流概述

事件流是一个事件从事件源传播到文档根元素的过程。当发生事件时，事件对象会在该事件源上创建，然后沿着DOM树向上传播。在这个过程中，事件对象会触发每个节点上挂载的事件监听器。

事件冒泡

事件冒泡是一种事件流模式，其中事件对象从事件源沿着DOM树向上传播，直到达到文档根元素。在这个过程中，事件对象会触发沿途遇到的每个节点上挂载的事件监听器。

优势：

简化事件处理，因为可以为祖先元素注册一个监听器，以处理所有子孙元素的事件。
便于实现冒泡效应，即在子元素上发生的事件也可以在祖先元素上触发监听器。

示例：

<div id="container">
  <button id="button">Click me</button>
</div>

<script>
  const container = document.getElementById("container");
  container.addEventListener("click", () => {
    console.log("Container clicked");
  });

  const button = document.getElementById("button");
  button.addEventListener("click", () => {
    console.log("Button clicked");
  });
</script>

在这个示例中，当单击按钮时，会首先触发按钮上的单击监听器，然后触发容器上的单击监听器。

事件捕获

事件捕获是一种事件流模式，其中事件对象从文档根元素沿着DOM树向下传播，直到到达事件源。在这个过程中，事件对象会触发沿途遇到的每个节点上挂载的捕获阶段事件监听器。

优势：

允许在事件到达事件源之前处理事件，这在阻止事件传播或修改事件对象时很有用。
能够实现捕获效应，即在祖先元素上发生的事件也可以在子元素上触发捕获阶段监听器。

示例：

<div id="container">
  <button id="button">Click me</button>
</div>

<script>
  const container = document.getElementById("container");
  container.addEventListener("click", () => {
    console.log("Container clicked");
  }, true);

  const button = document.getElementById("button");
  button.addEventListener("click", () => {
    console.log("Button clicked");
  });
</script>