JS中绑定事件顺序：事件冒泡与事件捕获区别

在Web开发中，JS中绑定事件是非常常见的操作。但你知道吗，当多个元素同时绑定了同一个事件时，事件的触发顺序是有讲究的。本文将详细介绍事件冒泡与事件捕获两种不同的事件顺序，并提供示例代码和实际应用指导。

事件冒泡

事件冒泡是最常见的事件顺序。当一个元素上的事件被触发时，该事件会向父元素传递，直到传递到文档根节点为止。下面是一个事件冒泡的示例代码：

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

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

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

当我们点击<div id="inner">元素时，输出结果如下：

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

可以看出，先触发了内部元素的事件处理程序，再依次触发外部元素的事件处理程序。

事件捕获

与事件冒泡相反，事件捕获是从文档根节点开始，向下传递到目标元素的过程。下面是一个事件捕获的示例代码：

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

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

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

当我们点击<div id="inner">元素时，输出结果如下：

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

可以看出，先触发了外部元素的事件处理程序（使用了true参数），再依次触发内部元素的事件处理程序。

事件顺序

在上述两个示例中，我们可以通过第三个参数来控制事件的顺序（true表示事件捕获，false或者不传参表示事件冒泡）。但实际上，在现代浏览器中，大多数事件都默认采用事件冒泡顺序。

需要注意的是，如果父元素与子元素都绑定了同一事件处理函数，那么会先触发子元素的事件处理函数，再依次触发父元素的事件处理函数。因此，在编写复杂的JS程序时，需要注意事件的执行顺序，避免出现不必要的错误。

实际应用指导

在实际项目中，我们可以根据需要选择合适的事件顺序，或者使用stopPropagation()方法来阻止事件的传递。下面是一个stopPropagation()的示例代码：

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

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

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

当我们点击<div id="inner">元素时，只输出内部元素的事件处理程序：

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

在本文中，我们详细介绍了JS中的事件冒泡和事件捕获两种不同的事件顺序，并提供了示例代码和实际应用指导。通过掌握这些知识，您可以更好地编写复杂的JS程序，避免出现不必要的错误。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/814