事件的冒泡

最新推荐文章于 2023-07-13 11:46:30 发布

小生听雨园

最新推荐文章于 2023-07-13 11:46:30 发布

阅读量140

点赞数

分类专栏： Javascript 文章标签：事件冒泡 JavaScript 事件传播阻止冒泡 DOM事件

本文链接：https://blog.csdn.net/weixin_44154094/article/details/113039827

版权

Javascript 专栏收录该内容

62 篇文章 3 订阅

订阅专栏

事件的冒泡

1.定义（这个别跳过）
2.代码（定义理解的好此处代码可以忽略）

1.定义（这个别跳过）

事件的冒泡（Bubble）
			 * - 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
			 * - 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡

2.代码（定义理解的好此处代码可以忽略）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			
			//为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>
	</body>
</html>