23 事件处理之添加事件监听器
在上一篇中，我们讨论了事件的基本概念，包括事件是如何在JavaScript中工作的以及其产生的方式。现在，我们将深入到事件处理的一个关键部分——添加事件监听器。通过这个过程，我们能够让我们的网页对用户的交互作出回应。
什么是事件监听器？
事件监听器是一个函数，它会在特定事件发生时被调用。换句话说，它“监听”事件的产生，并在事件发生时执行相应的回调函数。通过事件监听器，开发者可以实现对交互动作的响应，比如点击、悬停、输入等。
如何添加事件监听器？
在JavaScript中，我们使用 addEventListener 方法来将事件监听器附加到指定的元素上。其基本语法如下：
element.addEventListener(event, function, useCapture);
event：指定要监听的事件类型，例如'click','mouseover'等。function：当事件发生时要执行的函数。useCapture：一个布尔值，指示是否在捕获阶段执行回调，通常情况下设置为false。
示例：添加点击事件监听器
以下是一个简单的例子，展示如何为按钮添加点击事件监听器：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件监听器示例</title>
<style>
button {
padding: 10px 20px;
font-size: 16px;
}
</style>
</head>
<body>
<button id="myButton">点击我</button>
<script>
// 获取按钮元素
const button = document.getElementById('myButton');
// 定义点击事件处理函数
function handleClick() {
alert('按钮被点击了！');
}
// 添加事件监听器
button.addEventListener('click', handleClick);
</script>
</body>
</html>
在上述代码中，当用户点击按钮时，会弹出一个提示框，显示“按钮被点击了！”的消息。
事件监听器的多个添加
你可以为同一个元素添加多个事件监听器。比如，我们可以为同一个按钮添加 mouseover（鼠标悬停）和 click（点击）事件监听器：
function handleMouseOver() {
console.log('鼠标悬停在按钮上');
}
button.addEventListener('mouseover', handleMouseOver);
button.addEventListener('click', handleClick);
在这个例子中，用户在悬停时控制台会输出消息。
移除事件监听器
有时候，我们需要移除已添加的事件监听器。为此可以使用 removeEventListener 方法。它的语法与 addEventListener 基本相同，你只需要提供相同的事件类型和函数引用。
button.removeEventListener('click', handleClick);
小结
在本篇教程中，我们学习了如何添加事件监听器，使得我们的网页能够对用户的动作做出反应。通过使用 addEventListener 方法，我们可以轻松地处理多种事件，提升用户体验。关于 事件处理之事件冒泡和捕获 的内容将进一步说明事件是如何在DOM中传播的，这对于理解事件处理的深层机制非常重要。
即将到来的下一篇文章将带你走进 事件冒泡与捕获 的世界，帮助你更好地理解事件的流动及其对我们代码的影响。请继续关注！
