2、关于事件的冒泡行为

最新推荐文章于 2022-12-09 11:14:59 发布

Bwz_Learning

最新推荐文章于 2022-12-09 11:14:59 发布

阅读量692

点赞数 1

分类专栏： JavaScript_Bak 文章标签：事件 javascript的事件冒泡事件冒泡 event.stopPropagatio 阻止事件冒泡

本文链接：https://blog.csdn.net/zbw18297786698/article/details/51304037

版权

JavaScript_Bak 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

1、事件的冒泡行为

冒泡呢，简单的意思就是，你本来想只触发一个事件，但是实际上却出发了N个事件。

举例来说，有一个元素，如Span，你绑定了一个Click函数；你又为Div绑定了一个Click函数；而这个Span就在Div中，当你点击Span时，同时就会触发Span和Div的Click函数，这就是事件冒泡。

event.stopPropagation()的作用跟event.cancleBubble()是一样的，都是用来阻止浏览器默认的事件冒泡行为。

2、事件冒泡的小案例

2.1 html的代码

<head>
		<meta charset="UTF-8">
		<title>事件的冒泡行为</title>
		<style type="text/css">
			#mydiv {
				border: 1px solid red;
				width: 100px;
				height: 100px;
			}
			
			#myspan {
				border: 1px solid red;
				width: 30px;
				height: 30px;
				position: relative;
				left: 20px;
				top: 30px;
			}
		</style>
	</head>

	<body>
		<div id="mydiv">
			<span id="myspan">我是span</span>
		</div>
	</body>
</html>

2.2 Javascript代码

<script type="text/javascript">
		window.onload = function() {
			var my<span style="font-family: SimSun;">span</span><span style="font-family: SimSun;">= document.getElementById('myspan');</span>
			myspan.onclick = function() {
				/*alert('我是span');*/
				console.log('我是span');
			}
			var mydiv = document.getElementById('mydiv');
			mydiv.onclick = function() {
				/*alert('我是div');*/
				console.log('我是div');
			}
		}
</script>

2.3 关于事件的冒泡

当点击span区域时,会触发span的click函数和div上的click函数

3、阻止事件的冒泡传播

3.1 JavaScript阻止事件冒泡的方法,event.stopPropagation()

<script type="text/javascript">
		window.onload = function() {
			var myspan = document.getElementById('myspan');
			myspan.onclick = function(event) {
				event = event || e;
				alert('我是span');
				console.log('我是span');
				//阻止时间的冒泡传播
				event.stopPropagation();
                               //组织事件冒泡的传播
                               event.cancleBubble=true;
			}
			var mydiv = document.getElementById('mydiv');
			mydiv.onclick = function(event) {
				alert('我是div');
				console.log('我是div');
			}
			}
</script>

Bwz_Learning

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
2、关于事件的冒泡行为

1、事件的冒泡行为冒泡呢，简单的意思就是，你本来想只触发一个事件，但是实际上却出发了N个事件。举例来说，有一个元素，如Span，你绑定了一个Click函数；你又为Div绑定了一个Click函数；而这个Span就在Div中，当你点击Span时，同时就会触发Span和Div的Click函数，这就是事件冒泡。2、事件冒泡的小案例 2.1 html的代码
复制链接

扫一扫