Javascript Event（事件）的传播与冒泡

Javascript Event传播与冒泡

在前端开发中，事件处理是非常重要的一个方面。Javascript中的事件可以通过事件传播和冒泡来处理。了解这些概念对于编写高效的事件处理程序非常有用。

什么是事件传播？

事件传播指的是事件从DOM树的根节点向下传递到触发该事件的目标元素的过程。在事件传播期间，每个元素都会被检查以查看它是否具有与事件相关的事件处理程序。如果找到了处理程序，则它将被执行。

事件传播分为三个阶段：捕获阶段、目标阶段和冒泡阶段。在每个阶段中，都可以注册处理程序。

捕获阶段

在捕获阶段中，事件从DOM树的根节点向下传递到目标元素之前。在这个阶段中，如果某个元素拥有与事件相关的处理程序，那么它们会被执行。

目标阶段

当事件到达目标元素时，会触发与该元素相关联的处理程序。

冒泡阶段

在冒泡阶段中，事件从目标元素开始向上传递到DOM树的根节点。在这个阶段中，如果某个元素拥有与事件相关的处理程序，那么它们会被执行。冒泡阶段是最常用的阶段。

事件冒泡

事件冒泡是指在触发目标元素上的处理程序之后，事件继续向父元素传递的过程。在这个过程中，可以捕获到所有祖先元素上的处理程序。

例如，假设我们有一个HTML结构如下：

---- -----------
  ---- -----------------
------

当在#inner上触发一个事件时，它会首先触发#inner自己的事件处理程序，然后会依次从内部向外部沿着DOM树触发每个祖先元素（包括#outer）上的处理程序。

以下是一个示例代码，演示了事件冒泡的概念：

--------- -----
------
------
  -------------- -- ----- ----------------
-------
------
  ---- -----------
    ---- ---------------- ---------
  ------

  --------
    ----- ----- - ---------------------------------
    ----- ----- - ---------------------------------

    ------------------------------- ---------- -
      ------------------ ------- -----------
    ---

    ------------------------------- ---------- -
      ------------------ ------- -----------
    ---
  ---------
-------
-------

当单击“Click me”时，将在控制台中打印出“Inner element clicked.”和“Outer element clicked." 。

如何阻止事件传播？

有时候，我们需要在事件到达目标元素后停止事件的传播。这可以通过调用event.stopPropagation()方法来实现。

以下是一个示例代码，演示了如何使用stopPropagation()：

--------- -----
------
------
  -------------- -- -------- ----- -------------------
-------
------
  ---- -----------
    ---- ---------------- ---------
  ------

  --------
    ----- ----- - ---------------------------------
    ----- ----- - ---------------------------------

    ------------------------------- ---------- -
      ------------------ ------- -----------
    ---

    ------------------------------- --------------- -
      ------------------ ------- -----------
      ------------------------
    ---
  ---------
-------
-------

当单击“Click me”时，只会

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/857