js事件的冒泡

最新推荐文章于 2024-04-11 01:07:04 发布

嗒_嗒嗒

最新推荐文章于 2024-04-11 01:07:04 发布

阅读量2.5k

点赞数 2

分类专栏： JS知识点总结文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45561258/article/details/115508256

版权

JS知识点总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.事件的冒泡（Bubble）

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#bigbox{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			
			#box{
                width: 100px;
				height: 100px;
				background-color: green;
			}
						
		</style>
		<script type="text/javascript">
			
			window.onload = function(){
							
				//为box绑定一个单击响应函数
				var box = document.getElementById("box");
				box.onclick = function(){
					
					console.log("我是box的单击响应函数");								
				};
				
				//为bigbox绑定一个单击响应函数
				var bigbox = document.getElementById("bigbox");
				bigbox.onclick = function(){
				
                    console.log("我是bigbox的单击响应函数");					
				};
				
				//为body绑定一个单击响应函数
				document.body.onclick = function(){

                    console.log("我是body的单击响应函数");
				};				
				
			};
			
			
		</script>
	</head>
	<body>
		
		<div id="bigbox">
			我是bigbox
			<div id="box">我是box</div>
		</div>
		
	</body>
</html>

点击“我是box”，box及其祖先元素的单击事件都被触发了
在这里插入图片描述

2.取消冒泡

//为box绑定一个单击响应函数
var box = document.getElementById("box");
box.onclick = function(event){

	//解决兼容问题
	event = event || window.event;
                
	console.log("我是box的单击响应函数");	
                
    //可以将事件对象的cancelBubble设置为true，即可取消冒泡
	event.cancelBubble = true;
};

单击“我是box”，由于box取消了冒泡，所以只触发了box的单击事件
在这里插入图片描述
bigbox并没有取消冒泡，所以单击“我是bigbox”，bigbox还会向上冒泡，同时触发了其祖先元素的单击事件

嗒_嗒嗒

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
js事件的冒泡

1.事件的冒泡（Bubble）所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #bigb
复制链接

扫一扫