（day05—04）阻止冒泡

最新推荐文章于 2023-03-13 14:27:36 发布

avoidaily

最新推荐文章于 2023-03-13 14:27:36 发布

阅读量102

点赞数

CC 4.0 BY-SA版权

分类专栏： DOM

本文链接：https://blog.youkuaiyun.com/qq_43459224/article/details/90083380

DOM 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了HTML中事件处理的基本原理，通过示例代码展示了如何使用JavaScript为不同层级的DOM元素添加点击事件监听器，并解释了事件冒泡机制及如何阻止事件冒泡。

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

<!DOCTYPE HTML>
<html>
	<head>
		<title>事件处理</title>
		<meta charset="utf-8"/>
		<link rel="stylesheet" href="css/2.css"/>
		
	</head>
	<body>
		<div id="d1">
			<div id="d2">
				<div id="d3">
				</div>
			</div>
		</div>
    <script>
		// var d1=document.getElementById("d1");	
		// var d2=document.getElementById("d2");
		// var d3=document.getElementById("d3");

		//所有的id会成为全局变量，引用着元素对象
		d1.onclick=function(){
			var d1=this;
			alert(`d1:滚！`)
		}
		d2.onclick=function(e){
			var d2=this;
			alert("d2:滚！")
			//停止冒泡
			e.stopPropagation();
		}
		d3.onclick=function(e){
			var d3=this;
			alert("d3:滚！")
			//停止冒泡
			e.stopPropagation();
		}
	</script>
	</body>
</html>