js 事件参考

事件参考

事件介绍

触发事件是为了通知代码可能影响代码执行的“有趣变化”。这些可能来自用户交互，例如使用鼠标或调整窗口大小，底层环境状态的变化(例如，低电量或来自操作系统的媒体事件)以及其他原因。

每个事件都由一个基于Event接口的对象表示，并且可能有额外的自定义字段和/或函数来提供关于发生的事情的信息。每个事件的文档都有一个表(靠近顶部)，其中包括到相关事件接口的链接以及其他相关信息。 Event > Interfaces based on Event中给出了不同事件类型的完整列表。

本主题提供了您可能感兴趣的主要类型事件(动画，剪贴板，workers 等)的索引以及实现这些类型事件的主要类。最后是所有记录事件的扁平列表。

注意:本页列出了许多你在网上会遇到的最常见的事件。如果您正在搜索此处未列出的事件，请尝试在MDN的其余部分搜索其名称、主题区域或相关规范。

Event index

Event listing
本节列出了在MDN上有自己参考页面的事件。如果您对此处未列出的事件感兴趣，请尝试在MDN的其余部分搜索其名称、主题领域或相关规范。

1、创建和触发事件

本文演示了如何创建和分派DOM事件。这些事件通常被称为合成事件（synthetic events），与浏览器本身触发的事件相反。

1.1 创建自定义事件

事件可以用Event构造函数创建，如下所示:

const event = new Event("build");

// Listen for the event.
elem.addEventListener(
  "build",
  (e) => {
    /* … */
  },
  false,
);

// Dispatch the event.
elem.dispatchEvent(event);
1
2
3
4
5
6
7
8
9
10
11
12
13

上面的代码示例使用了EventTarget.dispatchEvent()方法。

大多数现代浏览器都支持此构造函数。要了解更详细的方法，请参见下面的老式方法。

添加自定义数据- CustomEvent()

要向事件对象添加更多数据，存在CustomEvent接口，并且可以使用detail属性来传递自定义数据。例如，可以这样创建事件:

const event = new CustomEvent("build", { detail: elem.dataset.time });
1

这将允许您访问事件监听器中的其他数据:

function eventHandler(e) {
  console.log(`The time is: ${e.detail}`);
}
1
2
3

老式的方式

创建事件的旧方法使用受Java启发的api。下面是一个使用document.createEvent()的示例:

// Create the event.
const event = document.createEvent("Event");

// Define that the event name is 'build'.
event.initEvent("build", true, true);

// Listen for the event.
elem.addEventListener(
  "build",
  (e) => {
    // e.target matches elem
  },
  false,
);

// target can be any Element or other EventTarget.
elem.dispatchEvent(event);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

事件冒泡

通常希望从子元素触发事件，并让一个祖先捕获它;可选的，带数据:

<form>
  <textarea>textarea>
form>
1
2
3

const form = document.querySelector("form");
const textarea = document.querySelector("textarea");

// Create a new event, allow bubbling, and provide any data you want to pass to the "detail" property
const eventAwesome = new CustomEvent("awesome", {
  bubbles: true,
  detail: { text: () => textarea.value },
});

// The form element listens for the custom "awesome" event and then consoles the output of the passed text() method
form.addEventListener("awesome", (e) => console.log(e.detail.text()));

// As the user types, the textarea inside the form dispatches/triggers the event to fire, and uses itself as the starting point
textarea.addEventListener("input", (e) => e.target.dispatchEvent(eventAwesome));
1
2
3
4
5
6
7
8
9
10
11
12
13
14

动态创建和调度事件

元素可以监听尚未创建的事件:

<form>
  <textarea></textarea>
</form>
1
2
3

const form = document.querySelector("form");
const textarea = document.querySelector("textarea");

form.addEventListener("awesome", (e) => console.log(e.detail.text()));

textarea.addEventListener("input", function () {
  // Create and dispatch/trigger an event on the fly
  // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element
  this.dispatchEvent(
    new CustomEvent("awesome", {
      bubbles: true,
      detail: { text: () => textarea.value },
    }),
  );
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

1.2 触发内置事件

这个示例演示了使用DOM方法模拟复选框上的单击(以编程方式生成单击事件)。查看实际示例

function simulateClick() {
  const event = new MouseEvent("click", {
    view: window,
    bubbles: true,
    cancelable: true,
  });
  const cb = document.getElementById("checkbox");
  const cancelled = !cb.dispatchEvent(event);

  if (cancelled) {
    // A handler called preventDefault.
    alert("cancelled");
  } else {
    // None of the handlers called preventDefault.
    alert("not cancelled");
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2、事件处理(概述)

事件是在浏览器窗口内触发的信号，用于通知浏览器或操作系统环境中的更改。程序员可以创建在事件触发时运行的事件处理程序（event handler）代码，从而允许网页对变化做出适当的响应。

本页提供了一个关于如何使用事件和事件处理程序的非常简短的“提醒”。新开发者应该阅读事件简介。

2.1 可用的事件有哪些?

事件记录在发出事件的JavaScript对象的页面中或页面下方。例如，要查找浏览器窗口或当前文档上触发的事件，请参阅“窗口”和“文档”中的“事件”部分。

你可以使用 Event 参考来查找哪些JavaScript对象为特定的 APIs 触发事件，例如动画、媒体等等。

2.2 注册事件处理程序

有两种推荐的方法来注册处理程序。事件处理程序代码可以在触发事件时运行，方法是将其分配给目标元素对应的onevent属性，或者使用addEventListener()方法将处理程序注册为元素的监听器。在任何一种情况下，处理程序都将接收一个符合Event接口(或派生接口)的对象。主要区别在于可以使用事件监听器方法添加(或删除)多个事件处理程序。

警告:不推荐使用HTML onevent属性设置事件处理程序的第三种方法!它们使标记膨胀，使其可读性降低，更难调试。有关更多信息，请参阅内联事件处理程序。

2.2.1 使用 onevent 属性

按照约定，触发事件的JavaScript对象具有相应的“onevent”属性(通过在事件名称前加上前缀“on”来命名)。在触发事件时调用这些属性以运行相关的处理程序代码，也可以由您自己的代码直接调用这些属性。

要设置事件处理程序代码，只需将其分配给适当的onevent属性。元素中的每个事件只能分配一个事件处理程序。如果需要，可以通过将另一个函数分配给同一属性来替换处理程序。

下面我们将展示如何使用onclick属性为click事件设置一个简单的greet()函数。

const btn = document.querySelector("button");

function greet(event) {
  console.log("greet:", event);
}

btn.onclick = greet;
1
2
3
4
5
6
7

**请注意，将表示事件的对象作为第一个参数传递给事件处理程序。**此事件对象实现Event接口或从Event接口派生。

2.2.2 EventTarget.addEventListener

在元素上设置事件处理程序的最灵活的方法是使用EventTarget.addEventListener方法。这种方法允许将多个监听器分配给一个元素，并在需要时删除侦听器(使用EventTarget.removeEventListener)。

注意:添加和删除事件处理程序的功能允许您，例如，让相同的按钮在不同的情况下执行不同的操作。此外，在更复杂的程序中，清理旧的/未使用的事件处理程序可以提高效率。

下面我们将展示如何将一个简单的greet()函数设置为click事件的监听器/事件处理程序(如果需要，可以使用lambda函数而不是命名函数)。再次注意，事件作为第一个参数传递给事件处理程序。

const btn = document.querySelector("button");

function greet(event) {
  console.log("greet:", event);
}

btn.addEventListener("click", greet);
1
2
3
4
5
6
7

该方法还可以使用其他参数/选项来控制捕获和删除事件的方式。更多信息可以在EventTarget.addEventListener引用页上找到。

2.2.3 使用中止信号

一个值得注意的事件监听器特性是能够使用中止信号同时清理多个事件处理程序。

这是通过将相同的AbortSignal传递给您希望能够一起删除的所有事件处理程序的addEventListener()调用来完成的。然后，您可以在拥有AbortSignal的控制器上调用abort()，它将删除与该信号一起添加的所有事件处理程序。例如，要添加一个可以用AbortSignal删除的事件处理程序:

const controller = new AbortController();

btn.addEventListener(
  "click",
  (event) => {
    console.log("greet:", event);
  },
  { signal: controller.signal },
); // pass an AbortSignal to this handler
1
2
3
4
5
6
7
8
9

然后，上面代码创建的事件处理程序可以像这样删除:

controller.abort(); // removes any/all event handlers associated with this controller
1

3、 js 构建块（事件介绍）

事件是在您正在编程的系统中发生的事情，系统会告诉您有关这些事件的信息，以便您的代码能够对它们做出反应。

例如，如果用户单击网页上的一个按钮，您可能希望通过显示一个信息框来对该操作作出反应。在本文中，我们将讨论与事件相关的一些重要概念，并研究它们在浏览器中的工作方式。这不会是一个详尽的研究;这就是你现在需要知道的。

3.1 什么是事件?

事件是在您正在编程的系统中发生的事情—当事件发生时，系统产生(或“触发”，produces (or “fires”))某种类型的信号，并提供一种机制，通过该机制，可以在事件发生时自动采取操作(即运行某些代码)。事件在浏览器窗口内触发，并且倾向于附加到驻留在其中的特定项。这可能是单个元素、一组元素、当前选项卡中加载的HTML文档或整个浏览器窗口。可能发生许多不同类型的事件。

例如：

• 用户选择、单击或将光标悬停在某个元素上。
• 用户在键盘上选择一个键。
• 用户调整或关闭浏览器窗口。
• 网页加载完成。
• 提交表单。
• 视频开始播放、暂停或结束。
• 出现错误。

您可以从这里(以及浏览MDN事件引用)了解到，有很多事件可以被触发。

要对事件作出反应，需要将事件处理程序（event handler）附加到事件上。这是在事件触发时运行的代码块(通常是程序员创建的JavaScript函数)。当这样的代码块被定义为响应一个事件而运行时，我们说我们正在注册一个事件处理程序( registering an event handler)。注意:事件处理程序有时被称为事件监听器(event listeners)——它们在我们的目的中几乎是可互换的，尽管严格地说，它们是一起工作的。监听器监听事件的发生，处理程序是响应事件发生而运行的代码。

注意:Web事件不是JavaScript核心语言的一部分——它们被定义为浏览器内置APIs 的一部分。

示例:处理单击事件

在下面的例子中，我们在页面中只有一个:

<button>Change colorbutton>
1

然后我们有一些JavaScript。我们将在下一节中更详细地讨论这个问题，但现在我们只能说:它为按钮的“click”事件添加了一个事件处理程序，并且处理程序通过将页面背景设置为随机颜色来响应事件:

const btn = document.querySelector("button");

function random(number) {
  return Math.floor(Math.random() * (number + 1));
}

btn.addEventListener("click", () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});
1
2
3
4
5
6
7
8
9
10

示例输出如下。试着点击这个按钮:

3.2 使用addEventListener ()

正如我们在上一个示例中看到的，可以触发事件的对象有一个addEventListener()方法，这是添加事件处理程序的推荐机制。

让我们仔细看看最后一个例子中的代码:

const btn = document.querySelector("button");

function random(number) {
  return Math.floor(Math.random() * (number + 1));
}

btn.addEventListener("click", () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});
1
2
3
4
5
6
7
8
9
10

当用户单击按钮时，HTML

元素将触发一个事件。所以它定义了一个addEventListener()函数，我们在这里调用它。我们传入两个参数:

• 字符串"click"，表示我们想要监听click事件。按钮可以触发许多其他事件，例如当用户将鼠标移动到按钮上时发生"mouseover"，或者当用户按下一个键并且按钮定焦时发生“keydown”。
• 当事件发生时调用的函数。在我们的示例中，该函数生成一个随机的RGB颜色，并将页面的背景色background-color设置为该颜色。

让handler函数成为一个单独的命名函数是可以的，像这样:

const btn = document.querySelector("button");

function random(number) {
  return Math.floor(Math.random() * (number + 1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener("click", changeBackground);
1
2
3
4
5
6
7
8
9
10
11
12

监听其他事件

一个按钮元素可以触发许多不同的事件。继续我们的实验。

首先，在本地复制random-color-addeventlistener.html，并在浏览器中打开它。这只是一个简单的随机颜色的例子的复制，我们已经玩过了。现在尝试依次将click更改为以下不同的值，并观察示例中的结果:

• focus and blur -当按钮聚焦和未聚焦时，颜色会发生变化;尝试按TAB键聚焦在按钮上，然后再按TAB键将焦点从按钮移开。这些通常用于在表单字段聚焦时显示有关填充表单字段的信息，或者在表单字段填充了不正确的值时显示错误消息。
• dblclick 只有双击按钮时颜色才会改变。
• mouseover and mouseout 当鼠标指针悬停在按钮上或指针离开按钮时，颜色分别发生变化。

有些事件(如click)几乎可以在任何元素上使用。另一些则更具体，只在某些情况下有用:例如，play事件只对某些元素可用，如。

删除监听器

如果您使用addEventListener()添加了一个事件处理程序，您可以使用removeEventListener()方法再次删除它。例如，这将删除changeBackground()事件处理程序:

btn.removeEventListener("click", changeBackground);
1

事件处理程序也可以通过将AbortSignal传递给addEventListener()，然后在拥有AbortSignal的控制器上调用abort()来删除。例如，要添加一个可以用AbortSignal删除的事件处理程序:

const controller = new AbortController();

btn.addEventListener("click",
  () => {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    document.body.style.backgroundColor = rndCol;
  },
  { signal: controller.signal } // pass an AbortSignal to this handler
);
1
2
3
4
5
6
7
8
9

然后，上面代码创建的事件处理程序可以像这样删除:

controller.abort(); // removes any/all event handlers associated with this controller
1

对于简单的小程序，清理旧的、未使用的事件处理程序是没有必要的，但是对于更大、更复杂的程序，它可以提高效率。此外，删除事件处理程序的功能允许您让相同的按钮在不同的情况下执行不同的操作:您所要做的就是添加或删除处理程序。

为单个事件添加多个监听器

通过对addEventListener()进行多个调用，提供不同的处理程序，您可以为单个事件提供多个处理程序:

myElement.addEventListener("click", functionA);
myElement.addEventListener("click", functionB);
1
2

现在，当单击元素时，这两个函数都将运行。

Learn more

addEventListener()还有其他强大的特性和选项可用。

这些内容超出了本文的范围，但是如果您想阅读它们，请访问addEventListener()和removeEventListener()参考页面。

3.3 其他事件监听器机制

我们建议您使用addEventListener()来注册事件处理程序。它是最强大的方法，适用于更复杂的程序。但是，您可能还会看到另外两种注册事件处理程序的方式:事件处理程序属性(event handler properties)和内联事件处理程序(inline event handlers)。

事件处理程序属性

可以触发事件的对象(如按钮)通常也具有名称为on的属性，后面跟着事件名称。例如，元素有一个onclick属性。这称为事件处理程序属性。要监听事件，可以将处理函数分配给属性。

例如，我们可以这样重写随机颜色的例子:

const btn = document.querySelector("button");

function random(number) {
  return Math.floor(Math.random() * (number + 1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
};
1
2
3
4
5
6
7
8
9
10

你也可以将handler属性设置为一个命名函数:

const btn = document.querySelector("button");

function random(number) {
  return Math.floor(Math.random() * (number + 1));
}

function bgChange() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.onclick = bgChange;
1
2
3
4
5
6
7
8
9
10
11
12

使用事件处理程序属性，您不能为单个事件添加多个处理程序。例如，你可以在一个元素上多次调用addEventListener('click', handler)，并在第二个参数中指定不同的函数:

element.addEventListener("click", function1);
element.addEventListener("click", function2);
1
2

这对于事件处理程序属性是不可能的，因为任何后续尝试设置该属性都会覆盖先前的属性:

element.onclick = function1;
element.onclick = function2;
1
2

内联事件处理程序——不要使用这些

你可能也会在你的代码中看到这样的模式:

<button onclick="bgChange()">Press mebutton>
1

function bgChange() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}
1
2
3
4

在Web上注册事件处理程序的最早方法涉及事件处理程序HTML属性(或内联事件处理程序)，如上面所示—属性值实际上是您希望在事件发生时运行的JavaScript代码。上面的例子调用了在同一页面的