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 (可选) - 它允许指定其他设置，特别是与事件监听器相关的捕获或 once 行为。

示例

示例：点击按钮时发出警报

在这个例子中，我们将显示一个简单的按钮，点击时会在屏幕上显示一个警报。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>
      // Get the button element
      const button = document.getElementById("myButton");
      // Define the event handler function
      function handleClick() {
         alert("Button clicked!");
      }
      // Attach the event listener to the button
      button.addEventListener("click", handleClick);
   </script>

</body>
</html>

示例：鼠标悬停时更改颜色

在这个例子中，我们有一个 div 标签，它最初的颜色为浅蓝色。将鼠标悬停在这个 div 标签上时，它将变为红色，如果我们移出鼠标，它将变回蓝色。

在这种情况下有两个事件，mouseover 和 mouseout。mouseover 表示鼠标移动到元素上，mouseout 表示鼠标移出元素。

这里有两个函数，一个用于 mouseover，一个用于 mouseout。在 mouseover 时，背景颜色属性设置为 lightcoral（一种红色），在 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>
      // Get the div element
      const myDiv = document.getElementById("myDiv");

      // Define the event handler function
      function handleMouseover() {
      myDiv.style.backgroundColor = "lightcoral";
      } 

      // Attach the event listener to the div
      myDiv.addEventListener("mouseover", handleMouseover);

      // Additional example: Change color back on mouseout
      function handleMouseout() {
         myDiv.style.backgroundColor = "lightblue";
      }

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

同一个元素可以有多个事件监听器，例如第二个示例，它有两个事件监听器（用于 mouseover 和 mouseout）。可以使用 removeEventListener 函数移除事件监听器。通过在 options 中传递 once: true 参数，我们可以确保事件监听器在调用一次后被移除，这在某些情况下（如支付）非常重要。

需要注意的是，不应该使用“on”前缀来指定事件，这意味着对于 click 事件，我们应该将其指定为“click”，而不是“onclick”。

打印页面