面试题：JavaScript 事件冒泡与捕获中的事件流控制

Question

在一个多层嵌套的 DOM 结构中，如 `<div id='outer'><div id='middle'><div id='inner'></div></div></div>`，假设在 `inner`、`middle`、`outer` 三个元素上都绑定了点击事件，且都设置了事件捕获和事件冒泡的处理函数。当点击 `inner` 元素时，描述完整的事件流执行顺序，并说明如何通过 `event.stopPropagation()` 和 `event.preventDefault()` 方法来控制事件流。此外，讨论这两个方法在事件冒泡和捕获阶段的不同表现。

Answer 1

1. 事件流执行顺序：
   • 事件捕获阶段：从最外层的祖先元素（document）开始，依次向内层元素传播，直到目标元素。即document -> outer -> middle -> inner。
   • 目标阶段：事件到达目标元素inner，此时inner元素上绑定的捕获和冒泡处理函数都会执行。
   • 事件冒泡阶段：从目标元素inner开始，依次向外层元素传播，直到最外层的祖先元素（document）。即inner -> middle -> outer -> document。
2. event.stopPropagation() 对事件流的控制：
   • 在捕获阶段：如果在捕获阶段的某个元素处理函数中调用 event.stopPropagation()，事件将不再继续向目标元素传播，后续捕获阶段的处理函数将不会执行。例如，在outer元素的捕获处理函数中调用event.stopPropagation()，那么middle和inner元素捕获阶段的处理函数都不会执行。
   • 在冒泡阶段：如果在冒泡阶段的某个元素处理函数中调用 event.stopPropagation()，事件将不再继续向上冒泡，后续冒泡阶段的处理函数将不会执行。例如，在middle元素的冒泡处理函数中调用event.stopPropagation()，那么outer和document元素冒泡阶段的处理函数都不会执行。
3. event.preventDefault() 对事件流的控制：
   • event.preventDefault() 并不会影响事件的传播（捕获和冒泡），它的作用是阻止元素的默认行为。例如，对于一个<a href="https://example.com">链接，点击时默认会跳转到指定的URL，若在点击事件处理函数中调用event.preventDefault()，则不会发生跳转，但事件依然会按照正常的捕获和冒泡顺序传播。
4. 两个方法在事件冒泡和捕获阶段的不同表现：
   • event.stopPropagation()：在捕获阶段阻止事件继续向目标元素传播，在冒泡阶段阻止事件继续向上冒泡，重点在于控制事件的传播路径。
   • event.preventDefault()：无论在捕获还是冒泡阶段调用，都只是阻止元素的默认行为，不影响事件的传播流程。