JS事件流

问题引入

首先看一个相关问题，点击span元素，输出什么？

    
    爷爷在此    
    
        
        我是父元素        
        我是子元素    
    

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的事件流叫做事件冒泡，即时间最开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。

例：

    
    
    
    


    
Click Me

当你点击了页面中的 div 元素，那么这个 click 事件的传播顺序如下：

1. div
2. body
3. html
4. document

也就是说，click 事件首先在元素 div 上发生，然后 click 事件沿 DOM 树向上传播，每一级的节点上都会发生，直至传播到 document 对象。如下图：

事件冒泡

2. 事件捕获

Netscape Communicator 团队提出的事件流则为事件捕获，事件捕获的思想是不太具体的节点更早的收到事件，而最具体的节点最后接收到事件。

事件捕获的用意在于事件达到预定目标之前捕获它。

如 1. 中所述案例，则单击 div 元素后，事件触发顺序如下：

1. document
2. html
3. body
4. div

也就是在事件捕获过程中，document 对象首先接收到 click 事件，然后事件沿 DOM 树向下依次传播，直到传播事件的实际目标，即 div 元素。过程如图：

事件捕获

提示

虽然事件捕获是 Netscape Communicator 唯一支持的事件流模型，但是 IE9、Safari、Chrome、Opera 和 Firefox 等目前也都支持这种事件流模型。由于版本兼容性问题，事件捕获还是较少使用。当然，建议依然是 放心使用事件冒泡，在有特殊需要时再使用事件捕获。

3. DOM 事件流

“DOM2级事件”规定的事件流包括三个阶段：

1. 事件捕获阶段
2. 处于目标阶段
3. 事件冒泡阶段

首先发生的是事件捕获，为截获事件提供了机会，然后实际目标接收到事件，最后阶段是冒泡阶段，此阶段可以对事件作出响应。

还以上述代码为例，单击 div 元素后的触发顺序则是：

DOM事件流

在 DOM 事件流中，实际目标（div）在捕获阶段不会接收到事件，意味着在捕获阶段事件从 document 到 html 再到 body 就会停止。下一阶段是处于目标阶段，于是事件在 div 上发生，并在事件处理中被看成冒泡的一部分。最后，冒泡阶段发生，事件传播回文档。

回顾问题

开篇提出的问题，仿佛在此可以得出结论：

输出结果

可是，当我们将子级的冒泡和捕获在js中位置调换后，输出的则是……子级先冒泡，再捕获！如下：

输出结果2

这是什么原因呢？？

下期——事件处理顺序，进一步揭晓。