JS事件流

2021-03-03 本文已影响0人流眸Tel

问题引入

首先看一个相关问题，点击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

这是什么原因呢？？

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