JavaScript addEventListener()

JavaScript 的 addEventListener() 方法用于将事件处理函数附加到 HTML 元素上。这允许您指定一个将在指定元素上发生特定事件时执行的函数。

事件是一种特定的发生或动作，如用户点击、按键或页面加载。浏览器检测到这些事件，并触发关联的 JavaScript 函数（称为事件处理程序）以作出相应的响应。

开发人员使用 addEventListener() 方法来链接特定的 HTML 元素与在事件发生时的具体功能行为。事件的例子包括点击、鼠标移动、键盘输入和文档加载。

语法

addEventListener() 的基本语法如下：

element.addEventListener(event, function, options);

这里的 element 是一个 HTML 元素，比如按钮、输入框或 div —— 可以使用诸如 getElementById、getElementsByClassName、getElementsByTagName 和 querySelector 等方法选择；这些都是选择元素的一些示例。事件监听器将绑定到这个特定的元素上。

参数

addEventListener() 方法接受以下参数：

event：一个字符串，表示动作的类型——例如，“click”，“mouseover”，或“keydown”等；它将作为触发给定函数的条件。
function：一个命名的、匿名的或者对现有函数的引用，在指定事件发生时被调用；本质上是在预定时刻促进执行的操作。
options（可选）：它允许指定额外的设置，特别是与事件监听器相关的捕获或一次性行为。

示例

示例：点击按钮时弹出警告框

在这个例子中，我们将展示一个简单的按钮，点击时会在屏幕上显示一个警告框。addEventLister 将负责处理“click”事件，这意味着当按钮被点击时，它将调用 handleClick 函数，该函数将弹出警告框。我们使用 getElementById 来获取要绑定事件监听器的按钮。

这是在表单提交、登录、注册等情况下常用的一个事件。

<html>
<head>
   <title>Click Event Example</title>
</head>
<body>
   <p>点击下面的按钮来执行一个事件</p>
   <button id="myButton">点击我</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。当鼠标悬停时，背景颜色属性设置为浅珊瑚色（一种红色），当鼠标移出时，背景颜色设置为浅蓝色。

这类鼠标悬停事件在很多网站的导航栏上很常见。

<html>
<head>
   <title>Mouseover Event Example</title>
   <style>
      #myDiv {
         width: 600px;
         height: 200px;
         background-color: lightblue;
      }
   </style>
</head>
<body>
   <div id="myDiv">将鼠标悬停于我之上</div>
   <script>
      // 获取 div 元素
      const myDiv = document.getElementById("myDiv");

      // 定义事件处理函数
      function handleMouseover() {
         myDiv.style.backgroundColor = "lightcoral";
      } 

      // 将事件监听器附加到 div
      myDiv.addEventListener("mouseover", handleMouseover);

      // 额外示例：鼠标移出时改变颜色
      function handleMouseout() {
         myDiv.style.backgroundColor = "lightblue";
      }

      myDiv.addEventListener("mouseout", handleMouseout);
   </script>
</body>
</html>

对于同一个元素可以有多个事件监听器，如第二个例子中的两个事件监听器（用于 mouseover 和 mouseout）。可以通过 removeEventListener 函数移除事件监听器。通过在选项参数中设置 once:true，我们可以确保事件监听器在被调用一次后即被移除，这在某些场景下很重要，例如支付流程。

需要注意的是，永远不要使用 "on" 前缀来指定事件；也就是说，对于点击事件，应该指定为 "click" 而不是 "onclick"。