JavaScript事件流
theme: channing-cyan
这是我参与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事件流
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-08-25，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录