JavaScript addEventListener
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 addEventListener 方法。此方法对于事件处理至关重要，它允许开发人员响应 Web 应用程序中的用户交互和其他事件。
基本定义
addEventListener 方法将事件处理程序附加到指定的元素。它提供了一种灵活的方式来处理事件，而不会覆盖同一元素上现有的事件处理程序。
该方法需要三个参数：事件类型（例如“click”）、事件发生时要执行的函数以及用于事件捕获的可选参数。可以为同一事件类型向同一元素添加多个监听器。
基本点击事件
此示例演示了如何将简单的点击事件监听器附加到按钮。
<!DOCTYPE html>
<html>
<head>
<title>Basic Click Event</title>
</head>
<body>
<button id="myBtn">Click Me</button>
<p id="output"></p>
<script>
const button = document.getElementById('myBtn');
const output = document.getElementById('output');
button.addEventListener('click', function() {
output.textContent = 'Button was clicked!';
});
</script>
</body>
</html>
在此基本示例中，我们使用 getElementById 选择一个按钮元素。然后，我们附加一个点击事件监听器，该监听器在单击按钮时更新一个段落元素。
这演示了 addEventListener 用于响应用户交互的基本用法。匿名函数充当事件处理程序，在事件发生时执行。
多个事件监听器
此示例展示了如何将多个事件监听器附加到同一元素。
<!DOCTYPE html>
<html>
<head>
<title>Multiple Listeners</title>
</head>
<body>
<button id="multiBtn">Hover or Click</button>
<p id="log"></p>
<script>
const btn = document.getElementById('multiBtn');
const log = document.getElementById('log');
function handleClick() {
log.textContent += 'Button clicked! ';
}
function handleMouseOver() {
log.textContent += 'Mouse over! ';
}
btn.addEventListener('click', handleClick);
btn.addEventListener('mouseover', handleMouseOver);
</script>
</body>
</html>
在这里，我们将两个不同的事件监听器附加到同一个按钮元素：一个用于点击事件，另一个用于鼠标悬停事件。每个监听器在触发时调用一个单独的命名函数。
这表明 addEventListener 允许对同一元素上的不同事件使用多个处理程序。使用命名函数而不是匿名函数是为了更好地组织代码和可重用性。
事件对象
此示例演示了如何使用传递给事件处理程序的事件对象。
<!DOCTYPE html>
<html>
<head>
<title>Event Object</title>
</head>
<body>
<div id="moveArea" style="width:300px;height:200px;border:1px solid black;">
Move your mouse here
</div>
<p>Coordinates: <span id="coords">0, 0</span></p>
<script>
const area = document.getElementById('moveArea');
const coords = document.getElementById('coords');
area.addEventListener('mousemove', function(event) {
coords.textContent = `${event.clientX}, ${event.clientY}`;
});
</script>
</body>
</html>
在此示例中，我们跟踪 div 元素内的鼠标移动。事件处理程序接收一个包含鼠标位置信息的事件对象，我们实时显示该信息。
这表明事件对象提供了有关事件的详细信息。clientX 和 clientY 属性提供相对于视口的鼠标坐标。
事件传播
此示例演示了事件传播（冒泡和捕获阶段）。
<!DOCTYPE html>
<html>
<head>
<title>Event Propagation</title>
</head>
<body>
<div id="outer" style="padding:50px;background-color:lightblue;">
<div id="inner" style="padding:50px;background-color:lightgreen;">
Click Me
</div>
</div>
<p id="propLog"></p>
<script>
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
const log = document.getElementById('propLog');
outer.addEventListener('click', function() {
log.textContent += 'Outer div clicked ';
}, false); // Bubbling phase (default)
inner.addEventListener('click', function() {
log.textContent += 'Inner div clicked ';
}, true); // Capturing phase
</script>
</body>
</html>
此示例显示了带有点击事件监听器的嵌套 div 元素。addEventListener 的第三个参数控制处理程序是在事件传播的捕获阶段还是冒泡阶段运行。
当您单击内部 div 时，外部 div 的处理程序（设置为冒泡阶段）将在内部 div 的处理程序（设置为捕获阶段）之后触发。这演示了完整的事件传播周期。
移除事件监听器
此示例展示了如何使用 removeEventListener 移除事件监听器。
<!DOCTYPE html>
<html>
<head>
<title>Removing Listeners</title>
</head>
<body>
<button id="toggleBtn">Click Me</button>
<button id="removeBtn">Remove Listener</button>
<p id="status">Listener is active</p>
<script>
const toggleBtn = document.getElementById('toggleBtn');
const removeBtn = document.getElementById('removeBtn');
const status = document.getElementById('status');
function handleClick() {
status.textContent = 'Button was clicked!';
}
toggleBtn.addEventListener('click', handleClick);
removeBtn.addEventListener('click', function() {
toggleBtn.removeEventListener('click', handleClick);
status.textContent = 'Listener was removed';
});
</script>
</body>
</html>
在此示例中，我们首先将一个点击事件监听器添加到按钮。然后，第二个按钮可以使用 removeEventListener 移除此监听器。
这表明要移除事件监听器，您必须传递在添加它时使用的完全相同的函数引用。这就是为什么命名函数通常是事件处理程序的首选，因为它们可能需要在以后被移除。
来源
在本文中，我们展示了如何在 JavaScript 中使用 addEventListener。此方法对于事件处理和交互式 Web 开发至关重要。
作者
列出 所有 JS DOM 教程。