冒泡传递和捕获传递

最新推荐文章于 2022-10-26 20:30:42 发布

发际线就是实力

最新推荐文章于 2022-10-26 20:30:42 发布

阅读量331

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/Cheris_LT/article/details/106480434

版权

冒泡传递

当事件发生的时候，结构上存在有嵌套关系的元素，从内层到外层传递事件。在设置时，将addEventListener的第三个参数设置为false。例如：

	<body>
		<div class="a" style="background-color: red;">
			<div class="b" style="background-color: green;">
				<div class="c" style="background-color: blue;"></div>
			</div>
		</div>
		
		<script type="text/javascript">
			let a=document.querySelector(".a")
			let b=document.querySelector(".b")
			let c=document.querySelector(".c")
			
			c.addEventListener("click",function(){
				console.log("c1")
			},false)
			
			b.addEventListener("click",function(){
				console.log("b1")
			},false)
			
			a.addEventListener("click",function(){
				console.log("a1")
			},false)

		</script>
	</body>

捕获传递

当事件发生的时候，结构上存在有嵌套关系的元素，从外层到内层传递事件，在设置时，将addEventListener的第三个参数设置为true。例如：

	<body>
		<div class="a" style="background-color: red;">
			<div class="b" style="background-color: green;">
				<div class="c" style="background-color: blue;"></div>
			</div>
		</div>
		
		<script type="text/javascript">
			let a=document.querySelector(".a")
			let b=document.querySelector(".b")
			let c=document.querySelector(".c")

			
			c.addEventListener("click",function(){
				console.log("c2")
			},true)
			
			b.addEventListener("click",function(){
				console.log("b2")
			},true)
			
			a.addEventListener("click",function(){
				console.log("a2")
			},true)
		</script>
	</body>

注意：1.addEventListener()不兼容ie6.7.8版本，可以使用obj.attachEvent(‘on’+type,fn)

2.传递的顺序：先捕获，到目标，再冒泡

3.对于单个目标元素来说，不存在冒泡或者捕获，冒泡和捕获是结构上的传递，单个元素不存在传递的

发际线就是实力

关注

0
点赞
踩
1

收藏

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

冒泡传递当事件发生的时候，结构上存在有嵌套关系的元素，从内层到外层传递事件。在设置时，将addEventListener的第三个参数设置为false。例如： <body> <div class="a" style="background-color: red;"> <div class="b" style="background-color: green;"> <div class="c" style="background-color: bl
复制链接

扫一扫