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时，由于设置了capture参数为true，首先触发parent元素上的事件处理器 (Parent clicked) - 然后事件到达目标元素
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