js事件冒泡

最新推荐文章于 2025-08-22 09:26:38 发布

原创最新推荐文章于 2025-08-22 09:26:38 发布 · 141 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js事件冒泡

js 专栏收录该内容

48 篇文章

订阅专栏

本文详细解释了JavaScript中事件冒泡的概念及工作原理，并通过具体的HTML示例代码展示了如何阻止事件冒泡，帮助读者理解不同层级元素事件触发的先后顺序。

部署运行你感兴趣的模型镜像

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>

	<script type="text/javascript">
		
		window.onload= function() {
			document.getElementById('hr_three').onclick=function(event) {
	                event.stopPropagation();
	         		alert('我是最里层！');
	         };

		}
	</script>

</head>
<body>
<div id="divOne" onclick="alert('我是最外层');" style="border:1px solid gray;padding:8px;">
	<div id="divTwo" onclick="alert('我是中间层！')" style="border:1px solid red;padding:8px;">
		<a id="hr_three" href="http://www.baidu.com" mce_href="http://www.baidu.com">点击我</a>
	</div>
</div>
</body>
</html>


通过以上方式我们可以处理，当我们在子节点和父节点上都注册同一类事件时，子类事件的触发不会影响到父类事件，冒泡是由内向外的

什么是JS事件冒泡？：

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

以下代码就会一直向上冒泡：

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>

	<script type="text/javascript">
		
		/*window.onload= function() {
			document.getElementById('hr_three').onclick=function(event) {
	                event.stopPropagation();
	         		alert('我是最里层！');
	         };

		}*/
	</script>

</head>
<body>
<div id="divOne" onclick="alert('我是最外层');" style="border:1px solid gray;padding:8px;">
	<div id="divTwo" onclick="alert('我是中间层！')" style="border:1px solid red;padding:8px;">
		<a id="hr_three" href="http://www.baidu.com" mce_href="http://www.baidu.com" onclick="">点击我</a>
	</div>
</div>
</body>
</html>

写道

http://blog.sina.com.cn/s/blog_a322154901015qkk.html

您可能感兴趣的与本文相关的镜像