JS事件冒泡

最新推荐文章于 2024-04-11 10:00:30 发布

半步浮生

最新推荐文章于 2024-04-11 10:00:30 发布

阅读量195

点赞数

文章标签：事件冒泡 js

本文链接：https://blog.csdn.net/qq_36245314/article/details/103355679

版权

事件冒泡

事件冒泡

事件冒泡

当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。
来个例子吧，这样清晰一点：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		.div1{
			width: 350px;
			height: 350px;
			background: deepskyblue;
		}
		.div2{
			width: 250px;
			height: 250px;
			background: deeppink;
		}
		.div3{
			width: 150px;
			height: 150px;
			background: gold;
		}
	</style>
</head>
<body>
	<div class="div1" >
		<div class="div2" >
			<div class="div3" > 	
			</div>
		</div>
	</div>
	<script>
		var divs =document.getElementsByClassName("div1")[0];
		divs.onclick=function () {
		    console.log("div1");
		}
		var divs1 =document.getElementsByClassName("div2")[0];
		divs1.onclick=function () {
		    console.log("div2")
		}
		var divs2 =document.getElementsByClassName("div3")[0];
		divs2.onclick=function () {
		    console.log("div3")
		}
	</script>
</body>
</html>

网页渲染的效果如下：

在这里插入图片描述

点击金色的div方块应该在控制台打印 div1
而实际上的结果却是这样的

在这里插入图片描述

div1、div2和div3 都打印出来了
点击粉色的方块打印的是div2和div3
点击蓝色的方块打印的是div3
这就是事件冒泡，他们就像是水里的鱼往外面吐泡泡一样，涟漪从内往外一层一层的扩散。
提到这个冒泡，再讲一下事件捕获。事件捕获和事件冒泡刚好相反，就像渔夫捕鱼撒的网。从外网内一层一层的收缩。