JavaScript———件添加监听的第三个参数测试

最新推荐文章于 2023-09-29 12:30:00 发布

小白家的小黑

最新推荐文章于 2023-09-29 12:30:00 发布

阅读量161

点赞数

分类专栏： web 文章标签： javascript

本文链接：https://blog.csdn.net/m0_53521757/article/details/117219358

版权

web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

事件添加监听的第三个参数测试

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件添加监听的第三个参数测试</title>
		<style type="text/css">
			#div_red{
				width: 300px;
				height: 300px;
				background-color: palegoldenrod;
			}
			#div_yellow{
				width: 200px;
				height: 200px;
				background-color:yellow;
			}
			#div_green{
				width: 100px;
				height: 100px;
				background-color:green;
			}
		</style>
	</head>
	<body>
		<div id="div_red">
			<div id="div_yellow">
				<div id="div_green">	</div>
			</div>
		</div>
		<script type="text/javascript">
			var div_red=document.getElementById("div_red");
			var div_yellow=document.getElementById("div_yellow");
			var div_green=document.getElementById("div_green");
			function f_red(){
				console.log("点击了褐色");
			}
			function f_yellow(){
				console.log("点击了黄色")
			}
			function f_green(){
				console.log("点击了绿色")
			}
			//点击添加事件
			//第三个参数：是否捕获   true ：捕获     false：冒泡    捕获——执行——冒泡
			div_red.addEventListener('click',f_red,true);//捕获
			div_yellow.addEventListener('click',f_yellow,true);//捕获
			div_green.addEventListener('click',f_green,true);//捕获
			//事件的冒泡 从触发事件的点向外层执行
			// div_red.addEventListener('click',f_red,false);//冒泡
			// div_yellow.addEventListener('click',f_yellow,false);//冒泡
			// div_green.addEventListener('click',f_green,false);//冒泡
		</script>
	</body>
</html>

核心代码——捕获

            div_red.addEventListener('click',f_red,true);//捕获
			div_yellow.addEventListener('click',f_yellow,true);//捕获
			div_green.addEventListener('click',f_green,true);//捕获

核心代码——冒泡

//事件的冒泡 从触发事件的点向外层执行
			// div_red.addEventListener('click',f_red,false);
			// div_yellow.addEventListener('click',f_yellow,false);
			// div_green.addEventListener('click',f_green,false);

举例：

div_red.addEventListener('click',f_red,true);//捕获
			div_yellow.addEventListener('click',f_yellow,false);//冒泡
			div_green.addEventListener('click',f_green,true);//捕获

效果图
在这里插入图片描述

小白家的小黑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript———件添加监听的第三个参数测试

事件添加监听的第三个参数测试完整代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>事件添加监听的第三个参数测试</title> <style type="text/css"> #div_red{ width: 300px; height: 300px; background-color: palegold
复制链接

扫一扫