事件监听与传播：addEventListener与removeEventListener详解-优快云博客

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/112299646

本文详细介绍了JavaScript中的事件监听器，包括addEventListener方法用于添加事件处理程序，支持冒泡和捕获两种传播方式。同时，还讲解了removeEventListener方法用于移除事件处理程序。文中通过实例展示了如何添加和移除事件处理程序，并对比了冒泡和捕获的区别。此外，还提供了一个实际的HTML和JavaScript代码示例，演示了事件监听器在不同元素上的应用。

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

1. addEventListener()方法

1.1. addEventListener()方法为指定元素添加事件处理程序。

1.2. 语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型(比如: "click"或"mousedown")。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值, 指定使用事件冒泡还是事件捕获。此参数是可选的。

1.3. 您能够向一个元素添加多个事件处理程序。

document.getElementById("d1").addEventListener("mouseover", myFunction);
document.getElementById("d1").addEventListener("mousemove", mySecondFunction);
document.getElementById("d1").addEventListener("mouseout", myThirdFunction);

1.4. addEventListener()方法为元素附加事件处理程序而不会覆盖已有的事件处理程序, 因此您能够向一个元素添加多个相同类型的事件处理程序, 例如两个"click"事件。

document.getElementById("myBtn").addEventListener("click", myFunction);
document.getElementById("myBtn").addEventListener("click", mySecondFunction);

1.5. 请勿对事件使用"on"前缀; 请使用"click"代替"onclick"。

1.6. 当使用addEventListener()方法时, JavaScript与html标记是分隔的, 已达到更佳的可读性; 即使在不控制html标记时也允许您添加事件监听器。

1.7. addEventListener()允许您将事件监听器添加到任何html对象上, 还可以是window对象, 甚至其他支持事件的对象, 比如: xmlHttpRequest对象。

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = '用户调整窗口大小';
});

2. 事件冒泡还是事件捕获?

2.1. 在html DOM中有两种事件传播的方法: 冒泡和捕获。

2.2. 事件传播是一种定义当发生事件时元素次序的方法。假如<div>元素内有一个<p>, 然后用户点击了这个<p>元素, 应该首先处理哪个元素"click"事件?

2.2.1. 在冒泡中, 最内侧元素的事件会首先被处理, 然后是更外侧的: 首先处理<p>元素的点击事件, 然后是<div>元素的点击事件。

2.2.2. 在捕获中, 最外侧元素的事件会首先被处理, 然后是更内侧的: 首先处理<div>元素的点击事件, 然后是<p>元素的点击事件。

2.3. 在addEventListener()方法中, 你能够通过使用useCapture参数来规定传播类型。useCapture默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。

2.4. 实例

document.getElementById("myBtn").addEventListener("click", myFunction, true);
document.getElementById("myBtn").addEventListener("click", myFunction, true);

3. removeEventListener()方法

3.1. removeEventListener()方法会删除已通过addEventListener()方法附加的事件处理程序。

3.2. 实例

element.removeEventListener("mousemove", myFunction);

4. 例子

4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>事件监听器</title>

		<style type="text/css">
			div {
				width: 150px;
				height: 90px;
				line-height: 90px;
				background-color: #D94A38;
				margin-top: 20px;
				text-align: center;
			}
			p {
				width: 150px;
				height: 32px;
				line-height: 32px;
				background-color: green;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="div1"><p id="p1">冒泡</p></div>
		<div id="div2"><p id="p2">捕获</p></div>	
		<div id="div3"><p id="p3">捕获</p></div>	

		<script type="text/javascript">
			var div1 = document.getElementById('div1'), p1 = document.getElementById('p1');
			var div2 = document.getElementById('div2'), p2 = document.getElementById('p2');
			var div3 = document.getElementById('div3'), p3 = document.getElementById('p3');
			
			function div1Click(e){
				console.log('div1被点击了');
			} 

			function p1Click(e){
				console.log('p1被点击了');
			}

			function div2Click(e){
				console.log('div2被点击了');
			}

			function p2Click(e){
				console.log('p2被点击了');
			}

			function div3Click(e){
				console.log('div3被点击了');
			}

			function p3Click(e){
				console.log('p3被点击了');
			}
			
			div1.addEventListener('click', div1Click, false);
			p1.addEventListener('click', p1Click, false);

			div2.addEventListener('click', div2Click, true);
			p2.addEventListener('click', p2Click, true);

			// 只要外层元素是捕获, 事件就是捕获传播类型
			div3.addEventListener('click', div3Click, true);
			p3.addEventListener('click', p3Click, false);
		</script>
	</body>
</html>

4.2. 点击冒泡