在Web开发中，JS中绑定事件是非常常见的操作。但你知道吗，当多个元素同时绑定了同一个事件时，事件的触发顺序是有讲究的。本文将详细介绍事件冒泡与事件捕获两种不同的事件顺序，并提供示例代码和实际应用指导。
事件冒泡
事件冒泡是最常见的事件顺序。当一个元素上的事件被触发时，该事件会向父元素传递，直到传递到文档根节点为止。下面是一个事件冒泡的示例代码：
-- -------------------- ---- ------- ---- ----------- ---- ---------------- --------- ------ -------- ---------------------------------------------------------- ---------- - ------------------ ---------- --- ---------------------------------------------------------- ---------- - ------------------ ---------- --- ---------
当我们点击<div id="inner">元素时，输出结果如下：
Inner clicked Outer clicked
可以看出，先触发了内部元素的事件处理程序，再依次触发外部元素的事件处理程序。
事件捕获
与事件冒泡相反，事件捕获是从文档根节点开始，向下传递到目标元素的过程。下面是一个事件捕获的示例代码：
-- -------------------- ---- ------- ---- ----------- ---- ---------------- --------- ------ -------- ---------------------------------------------------------- ---------- - ------------------ ------- ------------ -- ------ ---------------------------------------------------------- ---------- - ------------------ ------- ------------ -- ------ ---------
当我们点击<div id="inner">元素时，输出结果如下：
Outer clicked (capture) Inner clicked (capture)
可以看出，先触发了外部元素的事件处理程序（使用了true参数），再依次触发内部元素的事件处理程序。
事件顺序
在上述两个示例中，我们可以通过第三个参数来控制事件的顺序（true表示事件捕获，false或者不传参表示事件冒泡）。但实际上，在现代浏览器中，大多数事件都默认采用事件冒泡顺序。
需要注意的是，如果父元素与子元素都绑定了同一事件处理函数，那么会先触发子元素的事件处理函数，再依次触发父元素的事件处理函数。因此，在编写复杂的JS程序时，需要注意事件的执行顺序，避免出现不必要的错误。
实际应用指导
在实际项目中，我们可以根据需要选择合适的事件顺序，或者使用stopPropagation()方法来阻止事件的传递。下面是一个stopPropagation()的示例代码：
-- -------------------- ---- ------- ---- ----------- ---- ---------------- --------- ------ -------- ---------------------------------------------------------- ---------- - ------------------ ---------- --- ---------------------------------------------------------- ----------- - -------------------- ------------------ ------- --- ------- -------------- --- ---------
当我们点击<div id="inner">元素时，只输出内部元素的事件处理程序：
Inner clicked and stopped propagation
在本文中，我们详细介绍了JS中的事件冒泡和事件捕获两种不同的事件顺序，并提供了示例代码和实际应用指导。通过掌握这些知识，您可以更好地编写复杂的JS程序，避免出现不必要的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/814