【最形象图解】JS冒泡事件原理、应用、避免

最新推荐文章于 2023-05-06 14:24:39 发布

圈点Studio

最新推荐文章于 2023-05-06 14:24:39 发布

阅读量406

点赞数

分类专栏： JavaScript dom 冒泡文章标签： javascript js css html es6

本文链接：https://blog.csdn.net/Cml_l/article/details/111036594

版权

JavaScript 同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

dom

8 篇文章 0 订阅

订阅专栏

冒泡

1 篇文章 0 订阅

订阅专栏

我刚开始知道冒泡是在onmouseout和onmouseleave时。

一个支持冒泡一个不支持冒泡。

1.我们先来看看这两个事件的区别。

2.在谈谈“冒泡”是咋回事？

3.冒泡的应用

4.冒泡的禁用

冒泡是关于父级和子级的关系，那我们就直接来建立一个父级div和和一个子级div。

然后给父级分别做onmouseout和onmouseleave事件。

我们从外将鼠标经过父级移动到子级，在从子级经过父级移出。

就可以看到两者的区别了。

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#ms_01{
				width: 400px;
				height: 400px;
				background-color: #d3f017;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#ms_02{
				width: 220px;
				height: 220px;
				background-color: brown;
			}
		</style>
	</head>
	<body>
		<div id="ms_01">
			<div id="ms_02">
				
			</div>
		</div>
		<script type="text/javascript">
			window.onload=function(){
				var ms_01=document.getElementById("ms_01");
				ms_01.onmouseleave=function(){
					f_01();
				}
				function f_01(){
					ms_02.style.backgroundColor="black";
				}
			}
		</script>
	</body>

好了，大家现在已经知道一点冒泡的事件了。

接下来我们谈一谈“”冒泡“”，（今天你冒泡了吗？）

我们可以借助现实中的冒泡来理解一下，冒泡就是从子级一级一级往父级逐级向上传播，称为冒泡。

这样理解比较干燥，我们利用代码来辅助理解一下。

我们这个做五个div嵌套一下。（从外到里依次是：1-2-3-4-5）

我们得到的结果就是从子级，逐级往上传播。

<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#ms_01{
				width: 600px;
				height: 400px;
				background-color: #d3f017;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#ms_02{
				width: 100%;
				height: 260px;
				background-color: brown;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#ms_03{
				width: 100%;
				height: 200px;
				background-color: #28edf7;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#ms_04{
				width: 100%;
				height: 160px;
				background-color: #f7863a;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#ms_05{
				width: 100%;
				height: 100px;
				background-color: #f71010;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		</style>
	</head>
	<body>
		<div id="ms_01">
			<div id="ms_02">
				<div id="ms_03">
					<div id="ms_04">
						<div id="ms_05">
							
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			window.onload=function(){
				var ms_01=document.getElementById("ms_01");
				ms_01.onclick=function(){
					f_01();
				}
				ms_02.onclick=function(){
					f_02();
				}
				ms_03.onclick=function(){
					f_03();
				}
				ms_04.onclick=function(){
					f_04();
				}
				ms_05.onclick=function(){
					f_05();
				}
				function f_01(){
					alert("我是第1个div");
				}
				function f_02(){
					alert("我是第2个div");
				}
				function f_03(){
					alert("我是第3个div");
				}
				function f_04(){
					alert("我是第4个div");
				}
				function f_05(){
					alert("我是第5个div");
				}
			}
		</script>
	</body>

现在大家应该已经看出一点端倪了。

接下来我们说一说他的应用吧，

如果我们想收集子级的函数信息，是不是在父级应用就可以收集到了，而且这也是默认的冒泡。

接下来我们谈谈怎么避免冒泡吧。

event.stopPropagation();

不再派发事件。

终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

propagation的意思是（增殖;繁殖;传播;宣传;遗传;蔓延），

从字面意思我们不难理解，就是阻止事件的传递和蔓延是吧。

我们可以理解为，添加e.stopPropagation()，可以使其脱离原来父级的冒泡流，独立出来。

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#ms_01{
				width: 600px;
				height: 400px;
				background-color: #d3f017;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#ms_02{
				width: 100%;
				height: 260px;
				background-color: brown;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#ms_03{
				width: 100%;
				height: 200px;
				background-color: #28edf7;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#ms_04{
				width: 100%;
				height: 160px;
				background-color: #f7863a;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#ms_05{
				width: 100%;
				height: 100px;
				background-color: #f71010;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		</style>
	</head>
	<body>
		<div id="ms_01">
			<div id="ms_02">
				<div id="ms_03">
					<div id="ms_04">
						<div id="ms_05">
							
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			window.onload=function(){
				var ms_01=document.getElementById("ms_01");
				ms_01.onclick=function(){
					f_01();
				}
				ms_02.onclick=function(){
					f_02();
				}
				ms_03.onclick=function(){
					f_03();
				}
				ms_04.onclick=function(){
					f_04();
				}
				ms_05.onclick=function(){
					event.stopPropagation();
					f_05();
				}
				function f_01(){
					alert("我是第1个div");
				}
				function f_02(){
					alert("我是第2个div");
				}
				function f_03(){
					alert("我是第3个div");
				}
				function f_04(){
					alert("我是第4个div");
				}
				function f_05(){
					alert("我是第5个div");
				}
			}
		</script>
	</body>

到这里大家应该基本了解清楚了吧！

给大家留一个题，

【假设我们吧3脱离出来，去点击5，会出现什么情况呢？】

答案：出5——4——3，停

【假设我们吧3和5脱离出来，去点击5或4，会出现什么情况呢？】

答案：出5，停

答案：出4——3，停

是不是我们发现它会把自己的子集也一并脱离出去。

圈点Studio

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【最形象图解】JS冒泡事件原理、应用、避免

我刚开始知道冒泡是在onmouseout和onmouseleave时。一个支持冒泡一个不支持冒泡。1.我们先来看看这两个事件的区别。2.在谈谈“冒泡”是咋回事？3.冒泡的应用4.冒泡的禁用冒泡是关于父级和子级的关系，那我们就直接来建立一个父级div和和一个子级div。然后给父级分别做onmouseout和onmouseleave事件。我们从外将鼠标经过父级移动到子级，在从子级经过父级移出。就可以看到两者的区别了。 <head> <me.
复制链接

扫一扫