JavaScript事件流

这是我参与8月更文挑战的第25天，活动详情查看：8月更文挑战

理解事件流

事件流就是页面接收事件的顺序，一般有俩种事件流：事件冒泡和事件捕获，其实它就是发生事件的各种顺序，理解这个之后可以更好的运用事件操作。

事件冒泡

事件冒泡就是从文档最深处的节点向上传播，它从最底层开始触发，然后向上一直到window对象上。我们写个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
</head>
<body>
    <div id="box">
        <p >
            <button>点我出发向上</button>
        </p>
    </div>
</body>
</html>

大家看上面非常简单的例子，事件冒泡就是从 button => p => div => body => html

graph TD
button --> p --> div --> body -->html

我用掘金官方提供的流程图简单写了一下，大家可以看到就是这个顺序，非常好理解。

事件捕获

事件捕获的意思就是从外向内的，它是先获取到外层元素，然后通过一层一层的方式访问到最底层的内容。其实它的流程正好是与事件冒泡是相反的。我们可以借助上面的例子再重写画一下。

它获取的方式就是 html => body => div => p => button

graph TD
 html --> body  --> div --> p -->button

因为之前的旧版本不支持，实际当中我们几乎用不到事件捕获，一般都是用事件冒泡来处理操作。

事件流

DOM规范规定了事件流分为三个阶段：事件捕获 => 达到目标元素 => 事件冒泡，其中事件捕获是最先发生的，最晚发生的是事件冒泡，如果我们要做一些点击或者其他操作来响应事件，就必须要在事件冒泡前进行相应。

查了一下，DOM2 Events规范明确捕获阶段不会命中事件目标，但是在浏览器中都会在捕获阶段上给目标触发事件，所以我们在操作点击或者其他事件的时候是有俩个机会来操作。

注意 IE8及以前的版本不支持DOM事件流