DOM事件流：冒泡与捕获当DOM元素上发生事件时，事件会按照特定顺序传播。根据W3C事件模型，事件传播分为三个阶段：捕获阶段、目标阶段和冒泡阶段。
documenthtmlbodydivbutton (target)Click me↓捕获阶段document → html → body → div → button冒泡阶段↑button → div → body → html → document捕获阶段 (Capturing Phase)事件从DOM树的顶部（document）向下传播到目标元素的过程。
标准事件监听器中，设置第三个参数为true即可在捕获阶段捕获事件：
element.addEventListener('click', handler, true);
冒泡阶段 (Bubbling Phase)事件从目标元素向上传播到DOM树顶部（document）的过程。
默认情况下，事件处理器在冒泡阶段被调用：
element.addEventListener('click', handler); 或
element.addEventListener('click', handler, false);
// 模拟事件流
document.addEventListener('click', () => console.log('1. 捕获: document'), true);
document.addEventListener('click', () => console.log('6. 冒泡: document'), false);
document.body.addEventListener('click', () => console.log('2. 捕获: body'), true);
document.body.addEventListener('click', () => console.log('5. 冒泡: body'), false);
const button = document.querySelector('button');
button.addEventListener('click', () => console.log('3. 捕获: button'), true);
button.addEventListener('click', () => console.log('4. 冒泡: button'), false);
// 点击button时的输出顺序:
// 1. 捕获: document
// 2. 捕获: body
// 3. 捕获: button
// 4. 冒泡: button
// 5. 冒泡: body
// 6. 冒泡: document