js中事件冒泡

最新推荐文章于 2025-06-23 11:34:00 发布

清风夜半～

最新推荐文章于 2025-06-23 11:34:00 发布

阅读量633

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/im_dogg/article/details/84135679

web前端专栏收录该内容

16 篇文章

订阅专栏

本文深入解析事件冒泡机制，通过实例展示DOM结构中事件如何从子元素传递至父元素，探讨不同浏览器的冒泡顺序差异及如何阻止冒泡，帮助读者理解并掌握这一关键概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们先来说一下什么是事件冒泡

事件冒泡：当一个元素接收到事件后，会沿着DOM结构将事件逐层传递到其父元素上

在页面中写三个嵌套的div，dom结构如下


	</head>
	<body>
		
		<div id="one">
			<div id="two">
				<div id="three"></div>
			</div>
		</div>
	</body>

然后分别给三个div加上点击事件

window.onload=function(){
var one=document.getElementById("one");
var two=document.getElementById("two");
var three=document.getElementById("three");
				
one.onclick=function(){
	console.log("one");
}
				
two.onclick=function(){
	console.log("two");
}
				
three.onclick=function(){
	console.log("three");
}
}

我们点击id为three的div时，发现不仅它本身的点击事件被触发了，而且它的父级元素two和爷爷辈元素one的点击事件也被触发，控制台依次输出three two one

然而我们并没有点击two和one这个两个div，它们两个的点击事件其实就是由事件冒泡机制触发的，拿现实中的水泡来解释

气泡从水底开始往上升，由深到浅，升到最上面。在上升的过程中，气泡会经过不同深度层次的水。相对应地：这个气泡就相当于我们这里的事件，而水则相当于我们的整个dom树；事件从dom树的底层，层层往上传递，直至传递到dom的根节点

冒泡现象在不同的浏览器有兼容性问题

IE 6.0+:

冒泡顺序：div -> body -> html -> document

其他浏览器:

冒泡顺序：div -> body -> html -> document -> window

注意：不是所有的事件都能冒泡，以下事件不冒泡：blur、focus、load、unload

阻止冒泡事件

冒泡现象会触发父元素的事件，大多数情况下我们并不想要这种效果，那么如何阻止事件冒泡呢？遵循一个原则--事件在哪里开始冒泡，就在哪里阻止

阻止冒泡的写法有兼容性问题，主要有以下两种写法

标准浏览器和 ie浏览器

w3c：event.stopPropagation() proPagation

IE：event.cancelBubble = true

兼容的写法

if(event && event.stopPropagation){ // w3c标准    
    event.stopPropagation();
}else{ // IE系列 IE 678    
    event.cancelBubble = true;
}

以下面为例，点击按钮时阻止按钮事件的冒泡，避免box和document的点击事件触发

<div id="box">
	<button>点我</button>
</div>


	window.onload=function(){
		var box=document.getElementById("box");
		var btn=box.getElementsByTagName("button")[0];
		
		btn.onclick=function(event){
			//在这里阻止事件冒泡
			if(event && event.stopPropagation){ // w3c标准    
			    event.stopPropagation();
			}else{ // IE系列 IE 678    
			    event.cancelBubble = true;
			}
			console.log("我被点了一下");
		};
		
		box.onclick=function(){
			console.log("我也被点了一下");
		};
		
		document.onclick=function(){
			console.log("点击了文档");
		}
	}