面试题：JavaScript 中事件冒泡与捕获机制的理解

Question

请详细阐述 JavaScript 事件冒泡与捕获的执行顺序，并举例说明如何在代码中分别利用事件冒泡和捕获机制来实现特定功能，例如在一个包含多层嵌套 div 的 DOM 结构中，如何通过事件冒泡和捕获分别实现点击内层 div 时触发外层 div 的特定操作。

Answer 1

事件冒泡与捕获的执行顺序

1. 事件捕获阶段：当一个事件发生时，首先从 window 对象开始，沿着 DOM 树向下传播，直到目标元素。这个过程称为事件捕获。在捕获阶段，事件会依次经过目标元素的祖先元素。
2. 目标阶段：当事件到达目标元素时，处于目标阶段。在这个阶段，事件处理程序会在目标元素上执行。
3. 事件冒泡阶段：事件处理完成后，事件会从目标元素开始，沿着 DOM 树向上传播，直到 window 对象。这个过程称为事件冒泡。在冒泡阶段，事件会依次经过目标元素的祖先元素。

利用事件冒泡实现特定功能

假设有如下多层嵌套的 DOM 结构：

<div id="outer">
  Outer div
  <div id="inner">Inner div</div>
</div>

// 获取外层和内层 div
const outerDiv = document.getElementById('outer');
const innerDiv = document.getElementById('inner');

// 为外层 div 添加点击事件处理程序
outerDiv.addEventListener('click', function() {
  console.log('Outer div clicked (bubbling)');
});

// 为内层 div 添加点击事件处理程序
innerDiv.addEventListener('click', function() {
  console.log('Inner div clicked');
  // 这里无需额外操作，因为事件会自动冒泡到外层 div
});

当点击内层 div 时，首先会执行内层 div 的点击处理程序，输出 Inner div clicked，然后由于事件冒泡，外层 div 的点击处理程序也会执行，输出 Outer div clicked (bubbling)。

利用事件捕获实现特定功能

同样对于上述 DOM 结构：

// 获取外层和内层 div
const outerDiv = document.getElementById('outer');
const innerDiv = document.getElementById('inner');

// 为外层 div 添加点击事件处理程序，使用捕获阶段
outerDiv.addEventListener('click', function() {
  console.log('Outer div clicked (capturing)');
}, true);

// 为内层 div 添加点击事件处理程序
innerDiv.addEventListener('click', function() {
  console.log('Inner div clicked');
});

当点击内层 div 时，在事件捕获阶段，事件从 window 开始向下传播，先到达外层 div，执行外层 div 的捕获阶段点击处理程序，输出 Outer div clicked (capturing)，然后事件到达目标元素（内层 div），执行内层 div 的点击处理程序，输出 Inner div clicked。