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