简单理解事件冒泡和事件捕获

最新推荐文章于 2025-06-15 14:04:43 发布

原创最新推荐文章于 2025-06-15 14:04:43 发布 · 612 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

本文详细介绍了JavaScript中的事件冒泡和捕获机制，包括它们的工作原理、在DOM节点间的传递顺序以及如何通过addEventListener设置事件传递方式，特别提到了Vue和纯JS中的应用差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件冒泡和事件捕获

DOM 事件流会依次经历3个阶段（事件也会依次触发）：

(1)捕获阶段：事件从文档的根节点流向目标对象。

(2)当前目标阶段：在目标对象上被触发。

(3)冒泡阶段：从目标对象回溯到文档的根节点。

默认事件是冒泡阶段发生，如果设置了事件，那么会依次触发，内层事件执行完成，才会冒泡触发上一层。

1、事件冒泡

如图是3个div,蓝色最内层，绿色中间层，青色最外层，鼠标点击蓝色区域

请添加图片描述
结果如下：

请添加图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
.div1 {
	width: 600px;
	height: 600px;
	background-color: #00e9ea;
}
.div2{
	width: 400px;
	height: 400px;
	background-color: #00cc00;
}
.div3{
	width: 200px;
	height: 200px;
	background-color: #2d8cf0;
}
</style>
<body>
<div class='div1' onclick="handle1()">
	<div class='div2' onclick="handle2()">
		<div class='div3' onclick="handle3()"></div>
	</div>
</div>
</body>
</html>
<script>

function handle1(){
	console.log('我是最外层')
}
function handle2(){
	console.log('我是中间层')
}
function handle3(){
	console.log('我是最里层')
}
</script>

解释：点击一个位置（这个位置既属于最外层，又属于中间层，还属于最内层），那么事件发生顺序为：内层—>中间----->外层

2、事件捕获

示例1：将最外层div1绑定为捕获事件，那么触发顺序为：外层—>内层---->中间

请添加图片描述

代码：

<div class='div1'>
	<div class='div2' onclick="handle2()">
		<div class='div3' onclick="handle3()"></div>
	</div>
</div>
<script>
function handle1(){
	document.getElementsByClassName('div1')[0].addEventListener('click',()=>{
		console.log('我是最外层')
	},true)
}
handle1()

function handle2(){
	console.log('我是中间层')
}
function handle3(){
	console.log('我是最里层')
}
</script>

示例2：只将中间层div2绑定为捕获事件，那么触发顺序为：中间—>内层—>外层

请添加图片描述

示例3：只将最内层div3绑定为捕获事件，那么触发顺序为：内层—>中间----->外层

示例4：将最外层div1和中间层div2都绑定为捕获事件，那么触发顺序为：外层—>中间---->内层

1、在JavaScript中，事件默认是按照事件冒泡的方式传递的。
2、可以通过addEventListener方法的第三个参数来指定事件是按照事件捕获还是事件冒泡进行传递的。
3、true：表示事件按照事件捕获方式传递。
4、false：或不指定该参数，则表示事件按照事件冒泡方式传递。

注意：
1、vue中，元素使用@click绑定点击事件，默认冒泡，可以使用.capture修改为捕获阶段。
2、纯js中，使用onclick绑定点击事件，默认冒泡阶段触发，但是无法使用.capture,
只能使用addEventListener绑定事件，修改为捕获阶段。