JS：事件冒泡与捕获

一染星辰

于 2021-10-11 17:32:22 发布

阅读量118

点赞数

CC 4.0 BY-SA版权

分类专栏： p2代码 p2 原生js 文章标签： html5 javascript html

本文链接：https://blog.youkuaiyun.com/weixin_59519449/article/details/120707922

p2 原生js 同时被 2 个专栏收录

62 篇文章

订阅专栏

p2代码

19 篇文章

订阅专栏

这篇博客展示了如何使用CSS定义不同大小的盒子，并利用JavaScript为这些盒子添加点击事件监听器。当点击不同层级的盒子时，浏览器控制台会分别输出‘大’、‘中间’和‘小’，体现了事件冒泡的概念。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.d1{
				width: 300px;
				height: 300px;
				background: blue;
			}
			.d2{
				width: 200px;
				height: 200px;
				background: green;
			}
			.d3{
				width: 100px;
				height: 100px;
				background: pink;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="d1">
				大
				<div class="d2">
					中间
					<div class="d3">
						小
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var d1 = document.querySelector(".d1");
			var d2 = document.querySelector(".d2");
			var d3 = document.querySelector(".d3");
			
			d1.addEventListener("click",function(){
				console.log("我是大的");
			},true)
			
			d2.addEventListener("click",function(){
				console.log("我是中间");
			},true)
			
			d3.addEventListener("click",function(){
				console.log("我是小的");
			})
			
			
			
			
			
		</script>
	</body>
</html>