javascript学习-addEventListener

最新推荐文章于 2024-07-22 08:55:10 发布

加油吧qaq

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量158

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_43368682/article/details/107526813

版权

DOM2中的addEventListener

当一个动作需要做多件事的时候使用。

element.addEventListener("事件名",执行函数,true/false)

事件名没有on
第三个参数:true表示捕获阶段触发，false表示冒泡阶段触发（默认)。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<button>按钮</button>
		<script type="text/javascript">
			var btn=document.querySelector("button");
			btn.onclick=function(){
				var h1=document.createElement("h1");
				h1.innerHTML="helloworld";
				document.body.appendChild(h1);
				
				}
			var fn=function(){
				document.body.style.backgroundColor='aquamarine';
			}
			btn.addEventListener("click",fn);//事件名称，执行函数
			var fn=function(){
				var div=document.createElement("div");
				div.innerHTML="新增加的div";
				document.body.appendChild(div);
				
			}
			btn.addEventListener("click",fn)
		</script>
	</body>
</html>

结果：
在这里插入图片描述
冒泡的例子：
由内层一层一层向外冒

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="parent">
			<div class="child">
				<button type="button">按钮</button>
			</div>
		</div>
		<script type="text/javascript">
			    var btn = document.querySelector("button")
				var child = document.querySelector(".child")
				var parent = document.querySelector(".parent")
				var body = document.querySelector("body");
				var html = document.querySelector("html")
				
				     btn.addEventListener("click",function(){
								console.log("btn listen")
								
							})
					child.addEventListener("click",function(){
								console.log("child listen")
					})
							parent.addEventListener("click",function(){
								console.log("parent listen")
							})
							body.addEventListener("click",function(){
								console.log("body listen")
							})
							html.addEventListener("click",function(){
								console.log("html listen")
							})
		</script>
	</body>
</html>

结果：
在这里插入图片描述
addEventListener当第三个参数设置为true表示捕获阶段触发。
捕获例子：从外层父元素开始向内

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="parent">
			<div class="child">
				<button type="button">按钮</button>
			</div>
		</div>
		<script type="text/javascript">
			    var btn = document.querySelector("button")
				var child = document.querySelector(".child")
				var parent = document.querySelector(".parent")
				var body = document.querySelector("body");
				var html = document.querySelector("html")
				
				     btn.addEventListener("click",function(){
								console.log("btn listen")
								
							},true)
					child.addEventListener("click",function(){
								console.log("child listen")
					},true)
							parent.addEventListener("click",function(){
								console.log("parent listen")
							},true)
							body.addEventListener("click",function(){
								console.log("body listen")
							},true)
							html.addEventListener("click",function(){
								console.log("html listen")
							},true)
		</script>
	</body>
</html>

结果：
在这里插入图片描述

【注】事件可通过以下方式移除

btn.removeEventListener("click",fn)；

加油吧qaq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript学习-addEventListener

DOM2中的addEventListener当一个动作需要做多件事的时候使用。element.addEventListener("事件名",执行函数,true/false)事件名没有on第三个参数:true表示捕获阶段触发，false表示冒泡阶段触发（默认)。例子：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> &
复制链接

扫一扫