JavaScript中事件冒泡

最新推荐文章于 2024-07-08 08:31:14 发布

plannothing

最新推荐文章于 2024-07-08 08:31:14 发布

阅读量115

点赞数

分类专栏： js基础教程文章标签： javascript js event

本文链接：https://blog.csdn.net/plannothing/article/details/108027509

版权

js基础教程专栏收录该内容

101 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		#box1{
			width: 200px;
			height: 200px;
			background-color: #CCBBDD;
		}
		span{
			background-color: yellow;
		}
	</style>
	<script type="text/javascript">
		
		window.onload = function(){
			
			/*
			 * 事件的冒泡（bubble）
			 *  - 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发，其祖先上的元素也会同时触发
			 *  - 在开发中大部分情况都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
			 */
			//为span绑定一个单击响应函数
			var span01 = document.getElementsByTagName("span");
			span01[0].onclick = function(event){
				
				event = event || window.event;
				alert("我是span的单击响应函数");
				
				//取消冒泡
				//可以将事件对象的cancelBubble设置为true，即可取消冒泡
				event.cancelBubble = true;
			};
			//为span绑定一个单击响应函数
			var box01 = document.getElementById("box1");
			box01.onclick = function(){
				event = event || window.event;
				alert("我是div的单击响应函数");
				event.cancelBubble = true;
			};
			document.onclick = function(){
				alert("我是body的单击响应函数");
			};
			
		};
	</script>
</head>
<body>
	
	<div id="box1">
		我是box1
		<span>
			我是span
		</span>
		
	</div>
	
</body>
</html>

浏览器中的输出效果
冒泡效果

plannothing

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 200px; height: 200px; background-color: #CCBBDD; } span{ background-color: yellow; }
复制链接

扫一扫