JavaScript - addEventListener()
JavaScript 的 addEventListener() 方法用于将事件处理函数附加到 HTML 元素。这允许您指定一个函数，当指定的元素上发生特定事件时，该函数将被执行。
事件是特定的发生或动作，如用户点击、按键或页面加载。浏览器检测这些事件并触发相关的 JavaScript 函数（称为事件处理程序）来相应响应。
开发者使用 addEventListener() 方法将特定的 HTML 元素与特定事件发生时的函数行为关联起来。事件示例包括点击、鼠标移动、键盘输入和文档加载。
语法
addEventListener() 的基本语法如下 −
element.addEventListener(event, function, options);
这里的 element 是一个 HTML 元素，例如 button、input 或 div - 可以使用 getElementById、getElementsByClassName、getElementsByTagName 和 querySelector 等方法选择；这些只是几个例子。事件监听器附加到这个特定元素上。
参数
addEventListener() 方法接受以下参数 −
event − 一个字符串，表示动作类型 − 例如 "click"、"mouseover" 或 "keydown" 等；它将作为触发执行给定函数的信号。
function − 一个命名函数、匿名函数或对现有函数的引用，当指定事件发生时被调用；它本质上是预定时刻执行的操作。
options (可选) − 允许指定与事件监听器相关的额外设置，特别是捕获或一次性行为。
示例
示例：点击按钮时显示警报
在这个示例中，我们将显示一个简单的按钮，点击时会在屏幕上显示一个警报。addEventListener 将负责处理 click 事件，这意味着它会在按钮被点击时调用 handleClick 函数，向屏幕抛出一个警报。我们使用 getElementById 来获取要绑定事件监听器的按钮。
这是提交表单、登录、注册等情况下常用的一个事件。
<html>
<head>
<title>Click Event Example</title>
</head>
<body>
<p> Click the button below to perform an event </p>
<button id="myButton">Click Me</button>
<script>
// 获取按钮元素
const button = document.getElementById("myButton");
// 定义事件处理函数
function handleClick() {
alert("Button clicked!");
}
// 将事件监听器附加到按钮
button.addEventListener("click", handleClick);
</script>
</body>
</html>
示例：鼠标悬停时颜色变化
在这个示例中，我们有一个 div 标签，初始颜色为浅蓝色。当鼠标悬停在该 div 标签上时，它会变为红色，鼠标移出时又变回蓝色。
这里有两个事件，mouseover 和 mouseout。mouseover 表示鼠标移动到元素上，mouseout 表示鼠标移出元素。
这里有两个函数，一个用于 mouseover，一个用于 mouseout。在 mouseover 时，将背景颜色属性设置为浅珊瑚色（一种红色调），在 mouseout 时，将背景颜色设置为浅蓝色。
这类鼠标悬停事件在许多网站的导航栏上很常见。
<html>
<head>
<title>Mouseover Event Example</title>
<style>
#myDiv {
width: 600px;
height: 200px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="myDiv">Hover over me</div>
<script>
// 获取 div 元素
const myDiv = document.getElementById("myDiv");
// 定义事件处理函数
function handleMouseover() {
myDiv.style.backgroundColor = "lightcoral";
}
// 将事件监听器附加到 div
myDiv.addEventListener("mouseover", handleMouseover);
// 附加示例：在 mouseout 时恢复颜色
function handleMouseout() {
myDiv.style.backgroundColor = "lightblue";
}
myDiv.addEventListener("mouseout", handleMouseout);
</script>
</body>
</html>
同一个元素可以有多个事件监听器，就像第二个示例中那样，它有两个事件监听器（用于 mouseover 和 mouseout）。可以使用 removeEventListener 函数移除事件监听器。通过在选项中传递参数 once: true，可以确保事件监听器在被调用一次后自动移除，这在某些场景如支付情况下很重要。
重要的是，不要使用 “on” 前缀来指定事件，这意味着对于 click 事件，应该指定为 “click” 而不是 “onclick”。