小网站开发网页设计和网站设计的区别
如果神明还不帮你，说明他相信你。
目录
- 引言：
- 捕获阶段：
- 目标阶段：
- 冒泡阶段：
- 事件传播示意图：
- 示例：
- 代码：
- 解读：
- 输出：
引言：
DOM 事件的处理通常分为三个阶段：捕获阶段、目标阶段和冒泡阶段。这三个阶段描述了事件在 DOM 树中传播的顺序。
捕获阶段：
在捕获阶段，事件从 document 开始向下传播，逐层向下到达事件目标（即触发事件的元素）。在这个阶段，事件会经过所有的祖先元素，直到到达目标元素。
- 顺序：document → html → body → 目标元素
- 事件监听：可以在任何祖先元素上设置事件监听器，使用 { capture: true } 选项来监听捕获阶段的事件。
目标阶段：
在目标阶段，事件到达目标元素，事件处理程序在这个元素上被执行。此时，事件处理程序可以访问事件对象，获取有关事件的信息。
- 顺序：目标元素
- 事件监听：在目标元素上设置的事件监听器会在这个阶段被调用。
冒泡阶段：
在冒泡阶段，事件从目标元素开始向上冒泡，逐层返回到 document。在这个阶段，事件会经过所有的祖先元素，直到到达 document。
- 顺序：目标元素 → body → html → document
- 事件监听：可以在任何祖先元素上设置事件监听器，默认情况下，事件监听器会在冒泡阶段被调用。
事件传播示意图：
- 捕获阶段：document -> html -> body -> target (目标元素)
- 目标阶段：target (目标元素)
- 冒泡阶段：target (目标元素) -> body -> html -> document
示例：
代码：
以下是一个简单的示例，展示了如何在捕获和冒泡阶段设置事件监听器：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Event Phases Example</title>
</head>
<body><div id="parent" style="padding: 20px; border: 1px solid black;">Parent<button id="child">Click Me</button></div><script>const parent = document.getElementById('parent');const child = document.getElementById('child');// 捕获阶段的事件监听器parent.addEventListener('click', () => {console.log('Parent (capturing)');}, { capture: true });// 目标阶段的事件监听器child.addEventListener('click', () => {console.log('Child (target)');});// 冒泡阶段的事件监听器parent.addEventListener('click', () => {console.log('Parent (bubbling)');});</script>
</body>
</html>
解读：
当用户点击 “Click Me” 按钮时，事件传播的过程如下：
- 捕获阶段：事件从 document 开始向下传播，经过 parent 元素。捕获阶段的监听器被调用，输出：Parent (capturing)
- 目标阶段：事件到达 child 元素（按钮）。目标阶段的监听器被调用，输出：Child (target)
- 冒泡阶段：事件从 child 元素开始向上冒泡，经过 parent 元素。冒泡阶段的监听器被调用，输出：Parent (bubbling)
输出：
Parent (capturing)
Child (target)
Parent (bubbling)