Javascript 简明教程

JavaScript - addEventListener()

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

The JavaScript addEventListener() method is used to attach an event handler function to an HTML element. This allows you to specify a function that will be executed when a particular event occurs on the specified element.

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

Events are a specific occurrence or action like user clicks, keypress or page loads. The browser detects these events and triggers associated JavaScript functions known as event handlers to respond accordingly.

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

Developers employ the 'addEventListener()' method for linking particular HTML elements with specific function behaviours when those events occur. Examples of events include clicks, mouse movements, keyboard inputs, and document loading.

Syntax

addEventListener() 的基本语法如下：

The basic syntax for addEventListener() is as follows −

element.addEventListener(event, function, options);

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

Here element is an HTML element, such as a button, input or div - can be selected using methods like getElementById, getElementsByClassName, getElementsByTagName and querySelector; these are just a few examples. The event listener attaches to this particular element.

Parameters

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

The addEventListener() method accepts the following parameters −

event − a string that embodies the type of action − for instance, "click", "mouseover", or "keydown" among others; will serve as our trigger to execute the given function.
function − a named, anonymous or reference to an existing function is called when the specified event occurs; it’s essentially the operation that facilitates execution at predetermined instances.
options (optional) − it allows for the specification of additional settings particularly capturing or once behaviours related to the event listener.

Examples

Example: Alert on Clicking Button

在此示例中，我们将显示一个简单的按钮，单击它时在屏幕上显示一个警报。addeventlistener 将负责处理事件“click”，这意味着当单击按钮时，它将调用一个函数 handleClick，该函数向屏幕发出警报。我们使用 getElementById 提取我们希望将事件侦听器绑定到的按钮。

In this example, we will have a simple button being displayed which upon clicking shows an alert on the screen. The addeventlistener will be responsible for handling the event “click” which means it will call a function handleClick which throws an alert to the screen when the button is clicked. We make use of the getElementById to fetch the button we want to bind the event listener to.

当涉及表单提交、登录、注册等操作时，这是一种常用的事件。

This is a commonly used event when it comes to submitting on forms, login, signup etc.

<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 标记上时，它将变为红色，如果我们移出，它会变回蓝色。

In this example we have a dig tag which will initially be of light blue colour. Upon hovering the mouse on this div tag, it will change to red and back to blue if we hover out.

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

There are two events in this case, mouseover and mouseout. The mouseover means the mouse moves onto an element mouseout means the mouse movies out of an element.

此处有两个函数，一个用于 mouseover，一个用于 mouseout。在 mouseover 时，背景颜色属性设为淡珊瑚色（一种红色），在 mouseout 时，背景颜色设为淡蓝色。

There are two functions here, one for mouseover and one for mouseout. Upon mouseover, the background colour property is set to light coral (a shade of red) and upon mouseout, the background colour is set to light blue.

当悬停在许多网站的导航栏上时，通常会看到这类鼠标悬停事件。

These types of mouse hover events are commonly seen when hovering over the navbar of a lot of websites.

<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，我们可以确保事件侦听器在被调用一次后被删除，这在某些情况下（如付款）很重要。

There can be multiple event listeners for the same elements like in the case of 2nd example which has two event listeners (for mouseover and mouseout). Event listeners can be removed using the removeEventListener function. By passing a parameter in the options as once:true, we can ensure that the event listener is removed after being invoked once and this is important in certain case scenarios like payments.

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

It is important to note that one should never use the "on" prefix for specifying events, this simply means for a click event, we should specify it as "click" and not "onclick".