在瀏覽器環境下，事件的傳播（propagation）是指當一個特定的事件發生在DOM元素上時，它將按照特定的順序在DOM樹中傳播，影響相關的DOM節點。這一傳播過程分為三個階段：捕獲階段（Capture Phase）、目標階段（Target Phase）和冒泡階段（Bubble Phase）。
捕獲階段（Capture Phase）：事件從根節點一直向下傳播至觸發事件的目標節點。在這個階段，事件會經歷DOM樹的父節點鏈，直到達到觸發事件的目標節點。
目標階段（Target Phase）：事件已經到達了觸發事件的目標節點。在這個階段，事件在目標節點上被觸發和處理。
冒泡階段（Bubble Phase）：事件從目標節點開始，然后沿著DOM樹向上傳播，經過觸發事件的目標節點的所有父節點。
在事件傳播的每個階段，都可以通過事件處理程序來捕獲或處理事件。在實際應用中，開發者可以通過事件捕獲和冒泡來實現一些高級的事件處理邏輯。
例子說明：
假設有如下HTML結構：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Propagation Example</title>
</head>
<body>
<div id="outer">
<div id="middle">
<button id="inner">Click me!</button>
</div>
</div>
<script>
// 添加事件監聽器
document.getElementById('outer').addEventListener('click', function() {
console.log("`Outer` Div Capturing Phase");
}, true); // 使用捕獲階段
document.getElementById('middle').addEventListener('click', function() {
console.log("`Middle` Div Capturing Phase");
}, true);
document.getElementById('inner').addEventListener('click', function() {
console.log("`Inner` Button Capturing Phase");
}, true);
document.getElementById('outer').addEventListener('click', function() {
console.log("`Outer` Div Bubbling Phase");
});
document.getElementById('middle').addEventListener('click', function() {
console.log("`Middle` Div Bubbling Phase");
});
document.getElementById('inner').addEventListener('click', function() {
console.log("`Inner` Button Bubbling Phase");
});
</script>
</body>
</html>
在這個例子中，點擊按鈕時，事件將首先在捕獲階段從外到內依次觸發，然后在冒泡階段從內到外觸發。通過這個例子，可以清晰地看到事件是如何在DOM樹中傳播的。在實際開發中，利用這種事件傳播機制，我們可以更靈活地控制和處理用戶交互。
