DOM的addEventListener方法第三个参数

最新推荐文章于 2023-03-17 14:36:39 发布

banana_013

最新推荐文章于 2023-03-17 14:36:39 发布

阅读量293

点赞数

本文链接：https://blog.csdn.net/qq_36620379/article/details/104991455

版权

DOM的事件有三个阶段

1.捕获 
2.处于目标 
3.冒泡

其中addEventListener监听事件的时候第三个参数默认为false

当第三个参数不设置或者设置为false时，事件在冒泡阶段触法（由内到外，先执行子事件，再执行父事件）
当设置为true时，事件在捕获阶段就触法（由外到内，先执行父事件）

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="d1">
		<div class="d2">ooo</div>
	</div>	
	<div class="d3">
		<div class="d4">123</div>
	</div>	
	<script>
		let d1 = document.getElementsByClassName('d1')[0];
		let d2 = document.getElementsByClassName('d2')[0];
		d1.addEventListener('click',function(){console.log('d1,false')},false);
		d1.addEventListener('click',function(){console.log('d1,true')},true);
		d2.addEventListener('click',function(){console.log('d2,false')},false);
		d2.addEventListener('click',function(){console.log('d2,true')},true);

		let d3 = document.getElementsByClassName('d3')[0];
		let d4 = document.getElementsByClassName('d4')[0];
		d3.addEventListener('click',function(){console.log('d3,true')},true);
		d3.addEventListener('click',function(){console.log('d3,false')},false);
		d4.addEventListener('click',function(){console.log('d4,true')},true);
		d4.addEventListener('click',function(){console.log('d4,false')},false);
	</script>
</body>
</html>

点击时输出

 d1,true
 d2,false
 d2,true
 d1,false
 
 d3,true
 d4,true
 d4,false
 d3,false

banana_013

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM的addEventListener方法第三个参数

DOM的事件有三个阶段1.捕获 2.处于目标 3.冒泡其中addEventListener监听事件的时候第三个参数默认为false当第三个参数不设置或者设置为false时，事件在冒泡阶段触法（由内到外，先执行子事件，再执行父事件）当设置为true时，事件在捕获阶段就触法（由外到内，先执行父事件）...
复制链接

扫一扫