7.1 Event Bubbling (事件冒泡)
在 JavaScript 中，發生在一個元素上的事件，可能會在 DOM 樹中傳播。這個過程稱為 事件傳播，包含兩個主要機制：事件冒泡 (event bubbling) 與 事件捕獲 (event capturing)。
事件傳播機制：
- Event Bubbling (事件冒泡)。
- Event Capturing (事件捕獲)。
事件冒泡 是一個過程，其中在子元素上發生的事件依次向上傳播
經過父元素直到根元素 (通常是 document)。
解釋：
- 當按下按鈕
child時，首先會在元素child上觸發事件處理器 (Child clicked) - 然後事件冒泡到元素
parent，並觸發其處理器 (Parent clicked)
示例：
HTML
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
});
child.addEventListener('click', function(event) {
console.log('Child clicked');
});
</script>
</body>
</html>
7.2 Event Capturing (事件捕獲)
事件捕獲 是一個過程，其中事件從根元素開始向下傳播 經過父元素直到發生事件的目標元素。
要使用事件捕獲，需在添加事件處理器時將參數 capture 設為 true。
解釋：
-
當按下按鈕
child時，首先會在元素 parent 上觸發事件處理器 (Parent clicked)，因為參數capture設為true -
然後事件到達目標元素
child，並觸發其處理器 (Child clicked)
示例：
HTML
<!DOCTYPE html>
<html>
<head>
<title>Event Capturing Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
}, true);
child.addEventListener('click', function(event) {
console.log('Child clicked');
});
</script>
</body>
</html>
7.3 事件傳播的三階段模型
在 DOM 中處理事件的過程中，涉及三個階段：
1. Capturing Phase (捕獲階段)。事件從根元素（通常是 document）開始向下傳播經過父元素直到目標元素。
2. Target Phase (目標階段)。事件到達發生事件的目標元素。
3. Bubbling Phase (冒泡階段)。事件從目標元素向上傳播經過父元素直到根元素。
事件傳播控制
存在用於控制事件傳播的方法：
stopPropagation()。在冒泡和捕獲期間停止事件的進一步傳播。stopImmediatePropagation()。停止事件的進一步傳播，並防止當前元素上其他事件處理器的執行。preventDefault()。取消與事件相關的預設行為（例如，按下按鈕時提交表單）。
7.4 使用 stopPropagation 的示例
解釋：
- 當按下按鈕
child時，會觸發元素child上的事件處理器 (Child clicked) - 事件冒泡通過
event.stopPropagation()被停止，元素 parent 上的事件處理器不會觸發
HTML
<!DOCTYPE html>
<html>
<head>
<title>Stop Propagation Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
});
child.addEventListener('click', function(event) {
console.log('Child clicked');
event.stopPropagation(); // 停止事件冒泡
});
</script>
</body>
</html>
GO TO FULL VERSION