W3C 规范中定义了3个事件阶段，依次是捕获阶段 、 目标阶段 、 冒泡阶段。先捕获，后冒泡，捕获从上到下，就像石沉大海；而冒泡从下到上就像气泡冒出水面。
先看个示例：
html 页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>冒泡与捕获</title>
</head>
<body style="border: blueviolet 3px solid">
<table style="border: saddlebrown 3px solid">
<tbody>
<tr>
<td>美杉</td>
<td>禄铭</td>
</tr>
<tr id="secondTr">
<td id="firstTd" style="border: olivedrab 3px solid">彦芸</td>
<td>阳骞</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="captureAndBubble2.js"></script>
</body>
</html>
js ：
/*
* 冒泡与捕获
* @author Deniro Lee
*/
let html = document.documentElement;
let body = document.body;
let table = body.querySelector('table');
let tbody = body.querySelector('tbody');
let secondTr = body.querySelector('#secondTr');
let firstTd = body.querySelector('#firstTd');
/**
* 冒泡回调
* @param event
*/
function bubbleCallback(event) {
let target = event.currentTarget;
console.log('bubble -> ' + target.tagName);
}
/**
* 捕获回调
* @param event
*/
function captureCallback(event) {
let target = event.currentTarget;
console.log('capture -> ' + target.tagName);
}
html.addEventListener('click', captureCallback, true);
body.addEventListener('click', captureCallback, true);
table.addEventListener('click', captureCallback, true);
tbody.addEventListener('click', captureCallback, true);
secondTr.addEventListener('click', captureCallback, true);
firstTd.addEventListener('click', captureCallback, true);
html.addEventListener('click', bubbleCallback, false);
body.addEventListener('click', bubbleCallback, false);
table.addEventListener('click', bubbleCallback, false);
tbody.addEventListener('click', bubbleCallback, false);
secondTr.addEventListener('click', bubbleCallback, false);
firstTd.addEventListener('click', bubbleCallback, false);
在浏览器中运行以上页面，点击“彦芸”后，在 Console 中会看到冒泡与捕获的过程运行结果：
点击事件对象会按照图 1 的传播路径依次完成捕获、目标与冒泡阶段。如果某个阶段不支持或事件对象的传播被终止，那么该阶段就会被跳过。
代码中使用了addEventListener() 方法来跟踪捕获与冒泡阶段事件。该方法的语法为：
element.addEventListener(event, function, useCapture)
| 参数 | 描述 |
|---|---|
| event | 必须。字符串，指定事件名。注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 |
| function | 必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。 |
| useCapture | 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。可能值: true - 事件句柄会在捕获阶段执行; false- 默认值，事件句柄会在冒泡阶段执行。 |
之前定义的脚本，我们使用 addEventListener() 方法先绑定捕获方法，后绑定冒泡方法；如果我们交换下顺序，先绑定冒泡然后再捕获会怎样？
html.addEventListener('click', bubbleCallback, false);
body.addEventListener('click', bubbleCallback, false);
table.addEventListener('click', bubbleCallback, false);
tbody.addEventListener('click', bubbleCallback, false);
secondTr.addEventListener('click', bubbleCallback, false);
firstTd.addEventListener('click', bubbleCallback, false);
html.addEventListener('click', captureCallback, true);
body.addEventListener('click', captureCallback, true);
table.addEventListener('click', captureCallback, true);
tbody.addEventListener('click', captureCallback, true);
secondTr.addEventListener('click', captureCallback, true);
firstTd.addEventListener('click', captureCallback, true);
运行结果：
可以发现目标元素的冒泡事件先于捕获事件执行，其它元素顺序不变。也就是说，绑定顺序只影响到目标元素的事件发生顺序。
网友评论