自定义事件

约 860 字大约 3 分钟

2025-03-12

一、基本用法

CustomEvent 是 JavaScript 中用于创建自定义事件的接口。它允许你定义和触发自己的事件，并且可以携带额外的数据（通过 detail 属性）。CustomEvent 是 Event 的子类，因此它具有事件的所有基本功能，同时增加了对自定义数据的支持。

1、创建自定义事件

使用 CustomEvent 构造函数创建一个自定义事件。构造函数接受两个参数：

事件类型：一个字符串，表示事件的名称（例如 "myEvent"）。
配置对象：可选参数，可以包含以下属性：
- detail：传递给事件的数据。
- bubbles：布尔值，表示事件是否冒泡（默认 false）。
- cancelable：布尔值，表示事件是否可以取消（默认 false）。

// 创建一个自定义事件，并携带数据
const myEvent = new CustomEvent("myEvent", {
  detail: { message: "Hello, this is a custom event!" },
  bubbles: true,
  cancelable: true,
});

2、触发自定义事件

使用 dispatchEvent 方法在目标元素上触发自定义事件。

const element = document.getElementById("myElement");

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

3、监听自定义事件

使用 addEventListener 监听自定义事件，并访问 detail 中的数据。

element.addEventListener("myEvent", (event) => {
  console.log("Custom event triggered:", event.detail.message);
});

4、完整示例

以下是一个完整的示例，展示了如何创建、触发和监听自定义事件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CustomEvent Example</title>
  </head>
  <body>
    <button id="myButton">Click me</button>
    <p id="output"></p>

    <script>
      // 获取按钮和输出元素
      const button = document.getElementById("myButton");
      const output = document.getElementById("output");

      // 创建自定义事件
      const customEvent = new CustomEvent("buttonClicked", {
        detail: { message: "The button was clicked!" },
        bubbles: true,
        cancelable: true,
      });

      // 监听自定义事件
      button.addEventListener("buttonClicked", (event) => {
        output.textContent = event.detail.message;
      });

      // 触发自定义事件
      button.addEventListener("click", () => {
        button.dispatchEvent(customEvent);
      });
    </script>
  </body>
</html>

5、关键点

detail 属性：
- detail 是 CustomEvent 特有的属性，用于传递自定义数据。
- 数据可以是任意类型（对象、数组、字符串等）。
事件冒泡和捕获：
- 如果设置了 bubbles: true，事件会沿着 DOM 树向上冒泡。
- 可以在父元素上监听子元素触发的自定义事件。
事件取消：
- 如果设置了 cancelable: true，可以通过 event.preventDefault() 取消事件的默认行为。

二、高级用法

1、在父元素上监听子元素的自定义事件

如果事件冒泡，可以在父元素上监听子元素触发的事件。

document.body.addEventListener("myEvent", (event) => {
  console.log("Event bubbled up to body:", event.detail);
});

2、动态创建和触发事件

可以根据需要动态创建和触发事件。

function triggerCustomEvent(target, eventName, data) {
  const event = new CustomEvent(eventName, { detail: data });
  target.dispatchEvent(event);
}

// 使用示例
triggerCustomEvent(button, "dynamicEvent", { info: "This is dynamic!" });

3、结合类或模块使用

可以将自定义事件封装到类或模块中，以实现更复杂的逻辑。

class EventManager {
  constructor(element) {
    this.element = element;
  }

  trigger(eventName, data) {
    const event = new CustomEvent(eventName, { detail: data });
    this.element.dispatchEvent(event);
  }

  on(eventName, callback) {
    this.element.addEventListener(eventName, callback);
  }
}

// 使用示例
const manager = new EventManager(button);
manager.on("customEvent", (event) => {
  console.log("Event received:", event.detail);
});
manager.trigger("customEvent", { message: "Hello from EventManager!" });

三、总结

CustomEvent 是创建和触发自定义事件的强大工具。
通过 detail 属性可以传递任意数据。
支持事件冒泡和取消，适合复杂的交互场景。
可以结合类或模块封装，实现更高级的事件管理逻辑。

通过 CustomEvent，你可以轻松实现组件之间的通信或自定义交互逻辑。

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24