web前端学习（四十一）——JavaScript DOM EventListener（添加与移除监听事件）

原创已于 2024-04-24 11:31:01 修改 · 1.1w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #学习 #javascript

于 2021-02-22 11:07:55 首次发布

【HTML+CSS+JavaScript】专栏收录该内容

48 篇文章

订阅专栏

本文详细介绍了JavaScript中的addEventListener()方法，用于向元素添加事件监听，支持添加多个同类型或不同类型事件，以及向Window对象添加监听。同时，还讲解了事件冒泡和捕获的概念，并展示了如何通过removeEventListener()方法移除事件监听。示例代码涵盖了事件监听的添加、执行及移除，帮助理解其工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.添加监听事件（addEventListener() 方法）

addEventListener() 方法用于向指定元素添加事件句柄。addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

你可以向一个元素添加多个事件句柄，也可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件，也可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。

addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听。

其语法如下：👇👇👇

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown")。（注意:不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。）

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

1.1 向原元素添加监听事件

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p>该实例使用 addEventListener() 方法在用户点击按钮时执行函数。</p>
		<button type="button" id="myBtn">点我</button>
		<script>
			document.getElementById("myBtn").addEventListener("click",myFunction);
			function myFunction() {
				alert("Hello World!!!");
			}
		</script>
	</body>
</html>

1.2 向同一个元素中添加多个相同类型的监听事件

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p>该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。</p>
		<button type="button" id="myBtn">点我</button>
		<script type="text/javascript">
			var x=document.getElementById("myBtn");
			x.addEventListener("click",myFunction);
			x.addEventListener("click",someOtherFunction);
			function myFunction() {
				alert("Hello World!!!");
			}
			function someOtherFunction() {
				alert("函数已执行!!!");
			}
		</script>
	</body>
</html>

1.3 向同一个元素中添加多个不同类型的监听事件

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p>该实例使用 addEventListener() 方法在同一个按钮中添加多个不同类型的事件。</p>
		<button type="button" id="myBtn">点我</button>
		<p id="demo"></p>
		<script type="text/javascript">
			var x=document.getElementById("myBtn");
			x.addEventListener("mouseover",myFirstFunction);
			x.addEventListener("click",mySecondFunction);
			x.addEventListener("mouseout",myThirdFunction);
			function myFirstFunction() {
				document.getElementById("demo").innerHTML +="此时鼠标移动到了按钮上" + "<br />";
			}
			function mySecondFunction() {
				document.getElementById("demo").innerHTML +="此时鼠标点击了按钮" + "<br />";
			}
			function myThirdFunction() {
				document.getElementById("demo").innerHTML +="此时鼠标移走了" + "<br />";
			}
		</script>
	</body>
</html>

1.4 向Window对象添加监听事件

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p>该实例在 window 对象中使用 addEventListener() 方法。</p>
		<p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p>
		<p id="demo"></p>
		<script type="text/javascript">
			window.addEventListener("resize",function(){
				document.getElementById("demo").innerHTML=Math.random();
			});
		</script>
	</body>
</html>

1.5 带有参数的监听事件

当传递参数值时，使用"匿名函数"调用带参数的函数。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
	</head>
	
	<body>
		<p>该实例演示了在使用 addEventListener() 方法时如何传递参数。</p>
		<p>点击按钮执行计算。</p>
		<button type="button" id="myBtn">点我</button>
		<p id="demo"></p>
		<script type="text/javascript">
			var x=5,y=6;
			document.getElementById("myBtn").addEventListener("click",function(){
				myFunction(x,y);
			});
			function myFunction(a,b) {
				var ans=a*b;
				document.getElementById("demo").innerHTML=ans;
			}
		</script>
	</body>
</html>

1.6 监听事件中的事件冒泡和事件捕获

事件传递有两种方式：冒泡与捕获。事件传递定义了元素事件触发的顺序。如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发，然后再触发 <p> 元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递。当值为 true 时, 事件使用捕获传递。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
		<style type="text/css">
			div {
				border: 1px solid black;
				padding: 40px;
				background-color: aqua;
			}
		</style>
	</head>
	
	<body>
		<p>该实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p>
		<div id="myDiv1">
			<p id="myP1">点击段落，我是冒泡。</p>
		</div><br />
		<div id="myDiv2">
			<p id="myP2">点击段落，我是捕获。</p>
		</div>
		<script type="text/javascript">
			document.getElementById("myP1").addEventListener("click",function() {
				alert("你点击了P1元素!!!");
			},false);
			document.getElementById("myDiv1").addEventListener("click",function() {
				alert("你点击了DIV1元素!!!");
			},false);
			document.getElementById("myP2").addEventListener("click",function() {
				alert("你点击了P2元素!!!");
			},true);
			document.getElementById("myDiv2").addEventListener("click",function() {
				alert("你点击了DIV2元素!!!");
			},true);
		</script>
	</body>
</html>

2.移除监听事件（removeEventListener() 方法）

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
		<style type="text/css">
			#myDIV {
				border: 1px solid black;
				padding: 50px;
				background-color: burlywood;
				color: blue;
			}
		</style>
	</head>
	
	<body>
		<div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠标在框内移动时会显示随机数。
			<p>点击按钮移除 DIV 的事件句柄。</p>
			<button type="button" onclick="removeHandler()" id="myBtn">点我</button>
		</div>
		<p id="demo"></p>
		<script type="text/javascript">
			document.getElementById("myDIV").addEventListener("mousemove",myFunction);
			function myFunction() {
				document.getElementById("demo").innerHTML=Math.random();
			}
			function removeHandler() {
				document.getElementById("myDIV").removeEventListener("mousemove",myFunction);
			}
		</script>
	</body>
</html>