HTML事件绑定第三个参数true和flase的区别

最新推荐文章于 2022-11-23 22:55:32 发布

猫爷001

最新推荐文章于 2022-11-23 22:55:32 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： HTML

本文链接：https://blog.youkuaiyun.com/maoye198602102339/article/details/82897865

HTML5 专栏收录该内容

11 篇文章

订阅专栏

本文深入探讨HTML中事件冒泡机制，通过实例演示如何在不同层级元素间传递事件，以及如何使用stopPropagation()方法有效阻止事件冒泡，确保代码执行的精确控制。

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

绑定事件的语法：

elem.addEventListener("事件名",回调函数,true/false);

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件的冒泡和阻止</title>
	<style type="text/css">
		#div1{width: 400px;height: 400px;background-color: red;}
		#div2{width: 200px;height: 200px;background-color:green;}
	</style>
	<script type="text/javascript">
		function $(id){
			return document.getElementById(id);
		}
		function init(){
			div1 = $("div1");
			div2 = $("div2");
			//这是在事件捕获中执行，当点击div2，会先执行div1的点击事件，然后才执行div2的事件
			div1.addEventListener("click", div1_click,true);
			div2.addEventListener("click", div2_click,true);
			//这是在事件冒泡中执行，当点击div2，会先执行div2的点击事件，然后才执行div1的事件
			div1.addEventListener("click", div1_click,false);
			div2.addEventListener("click", div2_click,false);
		}
		function div1_click(e){
			alert("I am a div1");
		}
		function div2_click(e){
			alert("I am a div2");
			//既然在冒泡这里执行。我们就可以在这阻止冒泡，让程序执行完div2以后就不往上冒了
			e.stopPropagation();
		}
		window.addEventListener("load", init,false);
	</script>
</head>
<body>
	<div id="div1">
		<div id="div2"></div>
	</div>
</body>
</html>