html冒泡事件

最新推荐文章于 2023-06-01 09:30:59 发布

戏命湖

最新推荐文章于 2023-06-01 09:30:59 发布

阅读量1.1k

点赞数

分类专栏： html 文章标签：冒泡事件

本文链接：https://blog.csdn.net/qq_45627570/article/details/101215693

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

	<script type="text/javascript">
		
		window.onload = function(){
			
			/*
			 * 事件的冒泡（Bubble）
			 * 	- 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
			 * 	- 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
			 * 
			 */
			
			//为s1绑定一个单击响应函数
			var s1 = document.getElementById("s1");
			s1.onclick = function(event){
				event = event || window.event;
				alert("我是span的单击响应函数");
				
				//取消冒泡
				//可以将事件对象的cancelBubble设置为true，即可取消冒泡
				event.cancelBubble = true;
			};
			
			//为box1绑定一个单击响应函数
			var box1 = document.getElementById("box1");
			box1.onclick = function(event){
				event = event || window.event;
				alert("我是div的单击响应函数");
				
				event.cancelBubble = true;
			};
			
			//为body绑定一个单击响应函数
			document.body.onclick = function(){
				alert("我是body的单击响应函数");
			};
			
			
		};
		
		
	</script>
</head>
<body>
	
	<div id="box1">
		我是box1
		<span id="s1">我是span</span>
	</div>
	
</body>

戏命湖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html冒泡事件

<script type="text/javascript"> window.onload = function(){ /* * 事件的冒泡（Bubble） * - 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发 * - 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过...
复制链接

扫一扫