问题引入
首先看一个相关问题，点击span元素，输出什么？
<div id="yeyeELe">
爷爷在此
<p id="parEle">
我是父元素
<span id="sonEle">我是子元素</span>
</p>
</div>
var sonEle = document.getElementById('sonEle');
var parEle = document.getElementById('parEle');
var yeyeELe = document.getElementById('yeyeELe');
yeyeELe.addEventListener('click', function () {
console.log('爷爷 冒泡');
}, false);
sonEle.addEventListener('click', function () {
console.log('子级 捕获');
}, true);
parEle.addEventListener('click', function () {
console.log('父级 捕获');
}, true);
yeyeELe.addEventListener('click', function () {
console.log('爷爷 捕获');
}, true);
parEle.addEventListener('click', function () {
console.log('父级 冒泡');
}, false);
sonEle.addEventListener('click', function () {
console.log('子级 冒泡');
}, false);
想搞清楚最终的输出顺序，就不得不从事件流说起。
事件流
事件流需要从事件讲起。
JavaScript 与 HTML 之间的交互是通过事件实现的。
事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序）来预订事件，以便事件发生时执行相应代码。
而事件流描述的是从页面接收事件的顺序。
有意思的是，当时不同的开发团队对于事件流提出了完全相反的概念，主要分为IE事件流——冒泡，Netscape Communicator事件流——捕获。
1. 事件冒泡
IE的事件流叫做事件冒泡，即时间最开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件流</title>
</head>
<body>
<div id="ele">Click Me</div>
</body>
</html>
当你点击了页面中的 div 元素，那么这个 click 事件的传播顺序如下：
- div
- body
- html
- document
也就是说，click 事件首先在元素 div 上发生，然后 click 事件沿 DOM 树向上传播，每一级的节点上都会发生，直至传播到 document 对象。如下图：
事件冒泡
2. 事件捕获
Netscape Communicator 团队提出的事件流则为事件捕获，事件捕获的思想是不太具体的节点更早的收到事件，而最具体的节点最后接收到事件。
事件捕获的用意在于事件达到预定目标之前捕获它。
如 1. 中所述案例，则单击 div 元素后，事件触发顺序如下：
- document
- html
- body
- div
也就是在事件捕获过程中，document 对象首先接收到 click 事件，然后事件沿 DOM 树向下依次传播，直到传播事件的实际目标，即 div 元素。过程如图：
事件捕获
提示
虽然事件捕获是 Netscape Communicator 唯一支持的事件流模型，但是 IE9、Safari、Chrome、Opera 和 Firefox 等目前也都支持这种事件流模型。由于版本兼容性问题，事件捕获还是较少使用。当然，建议依然是 放心使用事件冒泡，在有特殊需要时再使用事件捕获。
3. DOM 事件流
“DOM2级事件”规定的事件流包括三个阶段：
- 事件捕获阶段
- 处于目标阶段
- 事件冒泡阶段
首先发生的是事件捕获，为截获事件提供了机会，然后实际目标接收到事件，最后阶段是冒泡阶段，此阶段可以对事件作出响应。
还以上述代码为例，单击 div 元素后的触发顺序则是：
DOM事件流
在 DOM 事件流中，实际目标（div）在捕获阶段不会接收到事件，意味着在捕获阶段事件从 document 到 html 再到 body 就会停止。下一阶段是处于目标阶段，于是事件在 div 上发生，并在事件处理中被看成冒泡的一部分。最后，冒泡阶段发生，事件传播回文档。
回顾问题
开篇提出的问题，仿佛在此可以得出结论：
输出结果
可是，当我们将子级的冒泡和捕获在js中位置调换后，输出的则是……子级先冒泡，再捕获！如下：
输出结果2
这是什么原因呢？？
下期——事件处理顺序，进一步揭晓。
网友评论