带有数据的 JavaScript 自定义事件

JavaScript 自定义事件允许您定义和分发自己的事件类型。标准 DOM 事件系统提供了许多事件类型，如 click、mouseover 和 submit 等。但是，在某些情况下，您可能需要自己定义事件类型，并在应用程序中触发它们。

本文将介绍如何创建一个带有数据的自定义事件，并在 JavaScript 中触发它。

准备工作

在创建自定义事件之前，需要了解以下几个要素：

1. 事件的类型：事件类型是一个字符串，描述事件的名称。例如，"data-loaded" 事件类型表示数据已加载。

2. 数据：您可以在事件中包含任何数据。例如，在 "data-loaded" 事件中，您可以包含从服务器加载的数据。

3. 事件对象：事件对象是包含事件信息的对象。例如，当前时间、触发事件的元素等。

创建自定义事件

要创建自定义事件，请使用以下代码：

const myEvent = new CustomEvent(eventType, { detail: data });

其中，eventType 是您定义的事件类型，data 是您要传递的数据。

触发自定义事件

要触发自定义事件，请使用以下代码：

element.dispatchEvent(myEvent);

其中，element 是要触发事件的元素。

监听自定义事件

要监听自定义事件，请使用以下代码：

element.addEventListener(eventType, (event) => {
  const data = event.detail;
  // 处理事件
});

其中，eventType 是事件类型，event 是事件对象。您可以从事件对象中获取传递的数据。

示例

以下是带有数据的自定义事件示例：

// 创建自定义事件
const myEvent = new CustomEvent("data-loaded", { detail: { name: "John", age: 30 } });

// 触发自定义事件
document.dispatchEvent(myEvent);

// 监听自定义事件
document.addEventListener("data-loaded", (event) => {
  const data = event.detail;
  console.log(data.name); // 输出 "John"
  console.log(data.age); // 输出 30
});

总结

自定义事件使您可以在应用程序中添加自己的事件类型。您可以通过创建事件对象并将其传递给元素，触发事件。并使用 addEventListener() 方法来监听事件。

记住，事件类型是事件的名称，而数据是您可以传递给事件的任何内容。这使您能够将数据传递给应用程序的其他部分，从而更轻松地交互和通信。