Javascript 简明教程

JavaScript - addEventListener()

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

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

开发人员使用“addEventListener()”方法将特定的 HTML 元素与那些事件发生时特定的函数行为相关联。事件的示例包括点击、鼠标移动、键盘输入和文档加载。

Syntax

addEventListener() 的基本语法如下：

element.addEventListener(event, function, options);

此处 element 是一个 HTML 元素，例如按钮、输入或 div，可以通过 getElementById、getElementsByClassName、getElementsByTagName 和 querySelector 之类的函数将其选中；这些只列出了几个示例。事件侦听器附加到此特定元素。

Parameters

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

event − 一个包含动作类型的字符串 − 例如，“click”、“mouseover”或“keydown”，其中一个；它将用作触发器以执行给定的函数。
function − 一个对现有函数的命名、匿名或引用，当指定的事件发生时它将被调用；它本质上是在预定的实例中促进执行的操作。
options (optional) − 它允许指定额外的设置，特别是事件侦听器相关的捕获或一次性行为。

Examples

Example: Alert on Clicking Button

在此示例中，我们将显示一个简单的按钮，单击它时在屏幕上显示一个警报。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>

Example: Colour Change on Mouse Over

在此示例中，我们有一个 dig 标记，它最初为淡蓝色。当鼠标悬停在此 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>
      // 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>

对于同一元素可以有多个事件侦听器，如第二个示例所示，它有两个事件侦听器（用于鼠标悬停和鼠标移出）。可以使用 removeEventListener 函数删除事件侦听器。通过在选项中传递一个参数，如 once:true，我们可以确保事件侦听器在被调用一次后被删除，这在某些情况下（如付款）很重要。

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