addEventListener（）方法– JavaScript事件监听器示例代码

The JavaScript addEventListener() method allows you to set up functions to be called when a specified event happens, such as when a user clicks a button. This tutorial shows you how you can implement addEventListener() in your code.

JavaScript addEventListener()方法允许您设置在发生指定事件时(例如，用户单击按钮时)要调用的函数。 本教程向您展示如何在代码中实现addEventListener()。

了解事件和事件处理程序 (Understanding Events and Event Handlers)

Events are actions that happen when the user or browser manipulates a page. They play an important role as they can cause elements of a web page to change dynamically.

事件是用户或浏览器操纵页面时发生的动作。 它们起着重要作用，因为它们可以导致网页元素动态变化。

For example, when the browser finishes loading a document, then a load event occurred. If a user clicks a button on a page, then a click event has happened.

例如，当浏览器完成文档的load ，就会发生load事件。 如果用户单击页面上的按钮，则发生click事件。

Many events can happen once, multiple times, or never. You also may not know when an event will happen, especially if it is user generated.

许多事件可能发生一次，多次或永远不会发生。 您也可能不知道事件何时发生，特别是如果事件是用户生成的。

In these scenarios, you need an event handler to detect when an event happens. This way, you can set up code to react to events as they happen on the fly.

在这些情况下，您需要一个事件处理程序来检测事件何时发生。 这样，您可以设置代码以对事件进行实时响应。

JavaScript provides an event handler in the form of the addEventListener() method. This handler can be attached to a specific HTML element you wish to monitor events for, and the element can have more than one handler attached.

JavaScript提供了addEventListener()方法形式的事件处理程序。 可以将此处理程序附加到要监视其事件的特定HTML元素上，并且该元素可以附加多个处理程序。

addEventListener()语法 (addEventListener() Syntax)

Here's the syntax:

语法如下：

target.addEventListener(event, function, useCapture)

• target: the HTML element you wish to add your event handler to. This element exists as part of the Document Object Model (DOM) and you may wish to learn about how to select a DOM element.

  target ：您希望添加事件处理程序HTML元素。 该元素作为文档对象模型(DOM)的一部分存在，您可能希望了解如何选择DOM元素 。

• event: a string that specifies the name of the event. We already mentioned load and click events. For the curious, here's a full list of HTML DOM events.

  event ：一个字符串，它指定事件的名称。 我们已经提到了load和click事件。 出于好奇，这里是HTML DOM事件的完整列表。

• function: specifies the function to run when the event is detected. This is the magic that can allow your web pages to change dynamically.

  function ：指定检测到事件时要运行的函数。 这就是使您的网页动态变化的魔力。

• useCapture: an optional Boolean value (true or false) that specifies whether the event should be executed in the capturing or bubbling phase. In the case of nested HTML elements (such as an img within a div) with attached event handlers, this value determines which event gets executed first. By default, it's set to false which means that the innermost HTML event handler is executed first (bubbling phase).

  useCapture ：一个可选的布尔值(true或false)，指定是在捕获阶段还是冒泡阶段执行事件。 对于带有附加事件处理程序的嵌套HTML元素(例如div的img )，此值确定哪个事件首先执行。 默认情况下，它设置为false，这意味着最里面HTML事件处理程序将首先执行(冒泡阶段)。

addEventListener()代码示例 (addEventListener() Code Example)

This is a simple example I made which shows you addEventListener() in action.

这是我制作的一个简单示例，向您展示了运行中的addEventListener() 。

When a user clicks the button, a message is displayed. Another button click hides the message. Here's the relevant JavaScript:

当用户单击按钮时，将显示一条消息。 再次单击按钮可隐藏消息。 以下是相关JavaScript：

let button = document.querySelector('#button');
let msg = document.querySelector('#message');

button.addEventListener('click', ()=>{
  msg.classList.toggle('reveal');
})

Going by the syntax shown previously for addEventListener():

按照前面显示的addEventListener()语法：

• target: HTML element with id='button'

  target ： id='button' HTML元素

• function: anonymous (arrow) function that sets up code necessary to reveal/hide the message

  函数 ：匿名(箭头)函数，用于设置显示/隐藏消息所需的代码

• useCapture: left to default value of false

  useCapture ：保留为默认值false

My function is able to reveal/hide the message by adding/removing a CSS class called "reveal" which changes the message element's visibility.

我的函数能够通过添加/删除称为“ reveal”CSS类来显示/隐藏消息，该类会更改消息元素的可见性。

Of course in your code, feel free to customize this function. You may also replace the anonymous function with a named function of your own.

当然，在您的代码中，可以随时自定义此功能。 您也可以用自己的命名函数替换匿名函数。

传递事件作为参数 (Passing Event as a Parameter)

Sometimes we may want to know more information about the event, such as what element was clicked. In this situation, we need to pass in an event parameter to our function.

有时我们可能想了解有关事件的更多信息，例如单击了什么元素。 在这种情况下，我们需要将事件参数传递给函数。

This example shows how you may obtain the element's id:

此示例说明如何获取元素的ID：

button.addEventListener('click', (e)=>{
  console.log(e.target.id)
})

Here the event parameter is a variable named e but it can be easily called anything else such as "event". This parameter is an object which contains various information about the event such as the target id.

这里的event参数是一个名为e的变量，但可以轻松地将其称为“ event”。 此参数是一个对象，其中包含有关事件的各种信息，例如目标ID。

You don't have to do anything special and JavaScript automatically knows what to do when you pass in a parameter this way to your function.

您无需做任何特殊的事情，当您以这种方式将参数传递给函数时，JavaScript会自动知道该做什么。

删除事件处理程序 (Removing Event Handlers)

If for some reason you no longer want an event handler to activate, here's how to remove it:

如果由于某种原因您不再希望激活事件处理程序，请按照以下步骤将其删除：

target.removeEventListener(event, function, useCapture);

The parameters are the same as addEventListener().

参数与addEventListener()相同。

实践使完美 (Practice Makes Perfect)

The best way to get better with event handlers is to practice with your own code.

更好地使用事件处理程序的最佳方法是使用自己的代码进行练习。

Here is an example project I did in which I used event handlers to change the color, size, and speed of bubbles flowing across the background of a web page (you will need to click on the central panel to reveal the controls).

这是我做的一个示例项目 ，其中我使用事件处理程序来更改在网页背景上流动的气泡的颜色，大小和速度(您需要单击中央面板以显示控件)。

Have fun and go make something awesome!

玩得开心，去做一些很棒的事情！

For more beginner-friendly web development knowledge, visit my blog at 1000 Mile World and follow me on Twitter.

有关更多适合初学者的Web开发知识，请访问我的博客1000 Mile World，然后在Twitter上关注我。

翻译自: https://www.freecodecamp.org/news/javascript-addeventlistener-example-code/