推荐答案
事件冒泡和事件捕获是 HTML DOM 中事件传播的两种机制。
事件冒泡 (Event Bubbling)：当一个 HTML 元素上的事件被触发时，该事件会从触发事件的最深层节点开始，然后依次向上层父元素传播，直到传播到 document 根节点。
事件捕获 (Event Capturing)：与事件冒泡相反，事件捕获是从 document 根节点开始，向下传播到目标元素，也就是最深层节点。
这两种机制定义了事件监听器被触发的顺序，它们是 DOM 事件流的一部分，默认情况下，大多数事件都是使用事件冒泡机制的。
本题详细解读
事件流 (Event Flow)
在理解事件冒泡和事件捕获之前，需要先了解事件流的概念。当 HTML 元素触发一个事件（如点击、鼠标移动等），这个事件在 DOM 树中传播的路径就是事件流。事件流主要包含三个阶段：
- 捕获阶段 (Capture Phase): 事件从
window对象开始向下传播到目标元素。 - 目标阶段 (Target Phase): 事件到达目标元素，触发事件监听器。
- 冒泡阶段 (Bubble Phase): 事件从目标元素开始向上冒泡到
window对象。
事件冒泡 (Event Bubbling) 的工作原理
事件冒泡是默认的事件传播机制。例如，如果一个 <div> 元素嵌套在另一个 <div> 元素中，并且内部和外部的 <div> 元素都绑定了相同的点击事件监听器：
<div id="outer">
<div id="inner">
点击我
</div>
</div>-- -------------------- ---- ------- ----- -------- - --------------------------------- ----- -------- - --------------------------------- ---------------------------------- ---------- - ------------------ --- ---------- --- ---------------------------------- ---------- - ------------------ --- ---------- ---
当你点击内部 innerDiv 时，控制台的输出顺序是：
Inner div clickedOuter div clicked
因为事件首先在 innerDiv 上触发，然后“冒泡”到 outerDiv。
事件捕获 (Event Capturing) 的工作原理
事件捕获是从 DOM 树的根节点开始向下传播的。要使用捕获机制，需要在 addEventListener 方法中将第三个参数设置为 true：
-- -------------------- ---- ------- ----- -------- - --------------------------------- ----- -------- - --------------------------------- ---------------------------------- ---------- - ------------------ --- ------- ------------ -- ------ ---------------------------------- ---------- - ------------------ --- ------- ------------ -- ------
如果使用上述代码，点击 innerDiv 时，控制台的输出顺序变为：
Outer div clicked (capture)Inner div clicked (capture)
因为事件先从 document 捕获到 outerDiv，然后再捕获到 innerDiv。
addEventListener 的第三个参数
addEventListener 方法接受三个参数：
type： 事件类型字符串，如'click','mouseover'等。listener： 事件监听器函数。useCapture(可选): 一个布尔值，默认是false(表示使用冒泡)，true表示使用捕获。
应用场景和注意事项
- 事件委托 (Event Delegation)：事件冒泡经常用于事件委托，即把事件监听器绑定到父元素，然后利用冒泡机制处理子元素的事件，这样可以减少监听器的数量，提高性能。
- 复杂布局下的事件处理： 当多个元素层叠时，理解事件捕获和冒泡有助于精确控制事件的触发顺序。
stopPropagation()方法： 可以调用事件对象的stopPropagation()方法来阻止事件继续冒泡或捕获。stopImmediatePropagation()方法：stopImmediatePropagation()方法可以阻止同一元素上其他监听器被触发，也会阻止事件冒泡或捕获。
理解事件冒泡和事件捕获是前端开发的基础，它们帮助我们更好地控制 DOM 元素的事件处理行为。