JavaScript事件也可以冒泡泡(Bubble)

最新推荐文章于 2024-06-24 09:34:57 发布

空白

最新推荐文章于 2024-06-24 09:34:57 发布

阅读量2k

点赞数 12

分类专栏： JavaScript 学习文章标签： javascript

本文链接：https://blog.csdn.net/qq_38496329/article/details/104704585

版权

本文详细介绍了JavaScript中的事件冒泡概念，如何移除事件冒泡，以及事件冒泡的应用示例。此外，还讲解了事件的委派技术，通过将事件绑定到共同祖先元素以高效处理后代元素的事件。最后，提到了事件的传播阶段，包括捕获阶段、目标阶段和冒泡阶段，并提供了一个拖拽实例作为实践应用。

摘要由CSDN通过智能技术生成

事件的冒泡（Bubble）

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
     
				width: 200px;
				height: 200px;
				background-color: yellowgreen;
			}
			
			#s1{
     
				background-color: yellow;
			}
			
		</style>
		<script type="text/javascript">
			
			window.onload = function(){
     
				
				//为s1绑定一个单击响应函数
				var s1 = document.getElementById("s1");
				s1.onclick = function(event){
     
					event = event || window.event;
					con("我是span的单击响应函数");
				};
				
				//为box1绑定一个单击响应函数
				var box1 = document.getElementById("box1");
				box1.onclick = function(event){
     
					event = event || window.event;
					alert("我是div的单击响应函数");
				};
				
				//为body绑定一个单击响应函数
				document.body.onclick = function(){
     
					alert("我是body的单击响应函数");
				};				
			};
		</script>
	</head>
	<body>
		
		<div id="box1">
			我是box1
			<span id="s1">我是span</span>
		</div>
		
	</body>
</html>

可以发现，点击div会同时触发div与body的点击事件，点击span会同时触发div与body的点击事件，这就是一种事件的冒泡，而想组织此事件的冒泡只需要添加一个属性即可解决。

移除冒泡

可以将事件对象的cancelBubble设置为true，即可取消冒泡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
     
				width: 200px;
				height: 200px;
				background-color: yellowgreen;
			}
			
			#s1{
     
				background-color: yellow;
			}
			
		</style>
		<script type="text/javascript">
			
			window.onload = function(){
     
				
				//为s1绑定一个单击响应函数
				var s1 = document.getElementById("s1");
				s1.onclick = function(event){
     
					event = event || window.event;
					console.log("我是span的单击响应函数");
					
					//取消冒泡
					//可以将事件对象的cancelBubble设置为true，即可取消冒泡
					event.cancelBubble = true;
				};