捕获和冒泡js

最新推荐文章于 2024-03-17 22:23:15 发布

初晨未凉

最新推荐文章于 2024-03-17 22:23:15 发布

阅读量78

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_45638909/article/details/109295521

版权

笔记专栏收录该内容

59 篇文章 1 订阅

订阅专栏

1.捕获:a->b,
2.冒泡:b->a
3.捕获优先于冒泡

一.捕获


 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				color: #fff;
				font-size: 1.5rem;
			}
			.a{
				width:500px;
				height: 500px;
				background-color: red;
				position: relative;
			}
			.b{
				width: 300px;
				height: 300px;
				position: absolute;
				background-color:orange;
			}
		</style>
	</head>
	<body>
		<div class="a">
			a
			<div class="b">
				b
			</div>
			<div class="c">
				c
			</div>
		</div>
		<script>
			var a = document.getElementsByClassName('a')[0];
			var b = document.getElementsByClassName('b')[0];
			var c = document.getElementsByClassName('c')[0];
			a.addEventListener("click",function(e){
				// e.stopImmediatePropagation();
				console.log("a");
			},true); 
			b.addEventListener("click",function(e){
				// e.stopImmediatePropagation();
				console.log("b");
			},true);
		</script>
	</body>
</html>

在这里插入图片描述
二.冒泡

<script>
			var a = document.getElementsByClassName('a')[0];
			var b = document.getElementsByClassName('b')[0];
			var c = document.getElementsByClassName('c')[0];
			a.addEventListener("click",function(e){
				// e.stopImmediatePropagation();
				console.log("a");
			},false); 
			b.addEventListener("click",function(e){
				// e.stopImmediatePropagation();
				console.log("b");
			},false);
</script>

在这里插入图片描述

3.停止捕获

var a = document.getElementsByClassName('a')[0];
			var b = document.getElementsByClassName('b')[0];
			var c = document.getElementsByClassName('c')[0];
			a.addEventListener("click",function(e){
				e.stopImmediatePropagation();
				console.log("a");
			},true); 
			b.addEventListener("click",function(e){
				// e.stopImmediatePropagation();
				console.log("b");
			},true);

在这里插入图片描述
2.停止冒泡

var a = document.getElementsByClassName('a')[0];
			var b = document.getElementsByClassName('b')[0];
			var c = document.getElementsByClassName('c')[0];
			a.addEventListener("click",function(e){
				// e.stopImmediatePropagation();
				console.log("a");
			},false); 
			b.addEventListener("click",function(e){
				e.stopImmediatePropagation();
				console.log("b");
			},false);

在这里插入图片描述

初晨未凉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
捕获和冒泡js

1.捕获:a->b,2.冒泡:b->a3.捕获优先于冒泡一.捕获 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> body{ color: #fff; font-size: 1.5rem; } .a{ width:500px; heig
复制链接

扫一扫

专栏目录