JS-捕獲、目標、冒泡

最新推荐文章于 2023-08-29 15:00:39 发布

练习一下

最新推荐文章于 2023-08-29 15:00:39 发布

阅读量78

点赞数

分类专栏： # JS 文章标签： js javascript

本文链接：https://blog.csdn.net/qq_32687373/article/details/103771553

版权

JS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

捕獲和冒泡是相對於其他級元素的，例如：父級元素或子級元素

捕獲按父級到子級的順序觸發事件；
目標即為被點擊的元素；
冒泡按子級到父級的順序觸發事件；

阻止捕獲：e.stopImmediatePropagation();//既可以阻止捕獲又可以阻止冒泡
阻止冒泡：e.stopPropagation();

舉例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<div id="grandfather" style="background-color:#ff00006e;width:300px;height:200px;">
	<p>祖父</p>
	<div id="father" style="background-color:#ffff006e;width:200px;height:150px;">
		<p>父親</p>
		<div id="son" style="background-color:#0080006e;width:100px;height:100px;">
			<p>兒子</p>
		</div>
	</div>
</div>
	
<script>
	var flag = flase;//true捕获阶段；false冒泡阶段，默認為false。
	
	document.getElementById("grandfather").addEventListener("click",function(e) {
    	alert("我是祖父");
	}, flag);
	
	document.getElementById("father").addEventListener("click",function(e) {
    	alert("我是父親");
	}, flag);
	
	document.getElementById("son").addEventListener("click",function(e) {
    	alert("我是兒子");
	}, flag);
</script>

</body>
</html>

flag為false時，

點擊兒子：“我是兒子”>>“我是父親”>>“我是祖父”；
點擊父親：“我是父親”>>“我是祖父”；
點擊祖父：“我是祖父”；

flag為true時，

點擊兒子：“我是祖父”>>“我是父親”>>“我是兒子”；
點擊父親：“我是祖父”>>“我是父親”；
點擊祖父：“我是祖父”；

练习一下

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-捕獲、目標、冒泡

捕獲和冒泡是相對於其他級元素的，例如：父級元素或子級元素捕獲按父級到子級的順序觸發事件；目標即為被點擊的元素；冒泡按子級到父級的順序觸發事件；阻止捕獲：e.stopImmediatePropagation();//既可以阻止捕獲又可以阻止冒泡阻止冒泡：e.stopPropagation();舉例：<!DOCTYPE html><html><hea...
复制链接

扫一扫