原文: The addEventListener() Method – JavaScript Event Listener Example Code

JavaScript addEventListener() 方法允许你设置一些函数,当一个指定的事件发生时被调用,例如当用户点击一个按钮。本教程告诉你如何在你的代码中实现addEventListener()。

了解事件和事件处理程序

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

例如,当浏览器完成加载一个文档时,就发生了一个 load 事件。如果用户点击了页面上的一个按钮,那么就发生了一个 click 事件。

许多事件可以发生一次、多次,或者永远不发生。你也可能不知道一个事件何时会发生,尤其是当它是由用户生成的。

在这些情况下,你需要一个事件处理程序 event handler 来检测事件的发生。这样,你就可以设置代码,在事件发生时对其作出反应。

JavaScript 以 addEventListener() 方法的形式提供了一个事件处理程序。这个处理程序可以附加到你希望监控事件的特定 HTML 元素上,而且这个元素可以附加一个以上的处理程序。

addEventListener() 语法

语法如下:

target.addEventListener(event, function, useCapture)
  • target你想把你的事件处理程序添加到的 HTML 元素。这个元素作为文档对象模型(DOM)的一部分存在,你可能希望了解如何选择一个 DOM 元素
  • event一个字符串,用于指定事件的名称。我们已经提到了 loadclick 事件。如果你感到好奇,这里有一个 HTML DOM 事件的完整列表。
  • function指定当事件被检测到时要运行的函数。这就是能让你的网页动态变化的魔力。
  • useCapture一个可选的布尔值(true 或 false),指定事件是否应该在捕获或冒泡阶段执行。对于嵌套的 HTML 元素(比如 div 中的 img),有附加的事件处理程序,这个值决定了哪个事件被首先执行。默认情况下,它被设置为 false,这意味着最里面的 HTML 事件处理程序被首先执行(冒泡阶段)。

addEventListener() 代码示例

演示 addEventListener() 的简单例子

这是我做的一个简单的例子,向你展示了 addEventListener() 的作用。

当用户点击按钮时,会显示一条信息。再点击一次按钮就会隐藏该信息。下面是相关的 JavaScript。

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

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

根据之前显示的 addEventListener() 语法:

  • targetHTML 元素,具有 id='button'
  • function匿名(箭头)函数,设置揭示/隐藏信息所需的代码。
  • useCapture默认值 false

我的函数能够通过添加/删除一个名为 “reveal” 的 CSS 类来显示/隐藏消息。这个类改变消息元素的可见性。

当然,在你的代码中,你可以自由地设置这个函数。你也可以用你自己命名的函数来代替匿名函数。

将事件作为参数传递

有时我们可能想知道关于事件的更多信息,比如什么元素被点击了。在这种情况下,我们需要向函数传入一个事件参数。

这个例子显示了如何获得元素的 id:

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

这里的事件参数是一个名为 e 的变量,但它可以很容易地被称为任何其他东西,如 “event”。这个参数是一个对象,它包含了关于事件的各种信息,如目标 ID。

你不需要做任何特别的事情,当你以这种方式向你的函数传递参数时,JavaScript 会自动知道该怎么做。

删除事件处理程序

如果由于某种原因,你不再希望一个事件处理程序被激活,下面是删除它的方法:

target.removeEventListener(event, function, useCapture);

参数和 addEventListener() 的参数相同。

熟能生巧

要想更好地使用事件处理程序,最好的办法是你自己写代码来练习。

下面是我做的一个项目实例,我使用事件处理程序来改变在网页背景上流动的气泡的颜色、大小和速度(你需要点击中央面板来显示控件)。

试试自己做一些很棒的项目吧!

想了解更多适合初学者的网页开发知识,请访问我在 1000 Mile World 的博客,并在 Twitter 上关注我。