优秀的编程知识分享平台

网站首页 > 技术文章 正文

JS中事件冒泡，事件捕获详解（什么是事件冒泡和事件捕获）

nanyue 2024-09-20 21:57:35 技术文章 12 ℃

一、事件流

事件是js与HTML交互的基础，事件流描述的是页面接受事件的顺序，而事件流又分为三个阶段：捕获阶段、目标阶段和冒泡阶段。

如果单纯的事件处理，事件捕获和事件冒泡二选一即可，导致两者并存的原因是当年微软和网景的浏览器大战，微软提出了事件冒泡，而网景提出了事件捕获。

1、事件冒泡

事件开始由最深层的元素接收，然后逐级向上传播

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 #div {
 width: 100px;
 height: 100px;
 background-color: red;
 }
 </style>
</head>
<body>
<div id="div"></div>
<script>
 let div = document.getElementById('div');
 div.onclick = function () {
 console.log('div');
 };
 document.body.onclick = function () {
 console.log('body')
 };
</script>
</body>
</html>

当点击div标签的时候，先打印出div，然后再打印出body。因为div先接收到点击事件，然后再向它的父元素body传播，再到html，最后到document。

IE，chrome，Firefox，Opera，Safari五大浏览器都支持事件冒泡。

2、事件捕获

事件开始由最外层的document捕获，然后依次向内传播，直至最深层的元素

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 #div {
 width: 100px;
 height: 100px;
 background-color: red;
 }
 </style>
</head>
<body>
<div id="div"></div>
<script>
 let div = document.getElementById('div');
 div.addEventListener('click', function () {
 console.log('div');
 }, true);
 document.body.addEventListener('click', function () {
 console.log('body')
 }, true);
</script>
</body>
</html>

当点击div标签的时候，最先打印body，然后再打印出div。因为addEventListener函数的第三个参数为true时，函数处理捕获事件，document先捕获点击事件，依次传播到html—body—div。

IE9，chrome，Firefox，Opera，Safari五大浏览器都支持事件捕获，IE8及以下版本不支持事件捕获。

最后

以下是总结出来最全前端框架视频，包含： javascript/vue/react/angualrde/express/koa/webpack 等学习资料。

【领取方式】

关注头条 前端全栈架构丶第一时间获取最新前端资讯学习

手机用户可私信关键词 【前端】即可获取全栈工程师路线和学习资料！

Tags：

猜你喜欢

最近发表
标签列表