JS——事件冒泡（1）

最新推荐文章于 2024-07-05 19:30:50 发布

spfLinux

最新推荐文章于 2024-07-05 19:30:50 发布

阅读量213

点赞数

分类专栏： js 文章标签： JS 事件冒泡

js 专栏收录该内容

137 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#d1 {
			width: 200px;
			height: 200px;
			background: blue;
		}
		#d2 {
			width: 150px;
			height: 150px;
			background: green;
		}
		#d3 {
			width: 100px;
			height: 100px;
			background: red;
		}
	</style>
</head>
<body>
	<div id="d1">
		<div id="d2">
			<div id="d3">

			</div>
		</div>
	</div>
	<script>
		d1.onclick = function() {
			alert(this.id);
		}
		d2.onclick = function() {
			alert(this.id);
		}
		d3.onclick = function() {
			alert(this.id);
		}
	</script>
</body>
</html>

--------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#d1 {
			width: 200px;
			height: 200px;
			background: blue;
		}
		#d2 {
			width: 150px;
			height: 150px;
			background: green;
		}
		#d3 {
			width: 100px;
			height: 100px;
			background: red;
		}
	</style>
</head>
<body>
	<div id="d1">
		<div id="d2">
			<div id="d3">

			</div>
		</div>
	</div>
	<script>
		//事件冒泡 
		d1.onclick = function(e) {
			alert(this.id);
			e.stopPropagation();
		}
		d2.onclick = function(e) {
			alert(this.id);
			e.stopPropagation();
		}
		d3.onclick = function(e) {
			alert(this.id);
			e.stopPropagation();
		}
	</script>
</body>
</html>