JavaScript 中 CustomEvent 怎么创建并派发带自定义 detail 数据的事件-js教程-PHP中文网

创建CustomEvent时需在构造函数第二个参数的init对象中传入detail属性，派发后监听者可通过event.detail直接访问数据，注意设置bubbles和cancelable选项，并避免传递DOM元素或函数。

javascript 中 customevent 怎么创建并派发带自定义 detail 数据的事件

创建并派发带 detail 数据的 CustomEvent，核心是正确使用构造函数传入事件名和配置对象，并确保 detail 作为配置项的一部分传入。

创建 CustomEvent 并传入 detail

通过 new CustomEvent() 构造函数创建事件时，在第二个参数（init 对象）中指定 detail 属性，它的值可以是任意类型（对象、数组、字符串、数字等）：

detail 必须写在初始化对象里，不能事后赋值（如 event.detail = {...} 在派发前无效）
事件名是字符串，建议用小写字母加短横线（如 "user-login"），避免与原生事件冲突

示例：

const event = new CustomEvent("data-loaded", {
detail: { id: 123, name: "Alice", tags: ["admin", "active"] }
});

在元素上派发自定义事件

使用 dispatchEvent() 方法将事件派发到目标元素（如 document、window 或某个 DOM 节点）：

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

派发后，监听该事件的回调可通过 event.detail 访问传递的数据
事件默认不冒泡，如需冒泡，需在初始化时显式设置 bubbles: true
默认不可取消，如需支持 preventDefault()，需设置 cancelable: true

示例：

document.dispatchEvent(event);
// 或绑定到特定元素
const btn = document.getElementById("submit-btn");
btn.dispatchEvent(new CustomEvent("click-validated", {
  detail: { isValid: true, errors: [] },
  bubbles: true,
  cancelable: true
}));

监听并获取 detail 数据

用 addEventListener() 监听自定义事件，回调函数的参数 event 对象直接提供 detail 属性：

无需额外解析，event.detail 就是你传入的原始值（深拷贝不会自动发生，引用类型仍为同一对象）
建议对 detail 做存在性或类型校验，尤其在跨模块通信时

示例：

document.addEventListener("data-loaded", (e) => {
  console.log("收到数据：", e.detail); // { id: 123, name: "Alice", ... }
  if (e.detail && typeof e.detail === "object") {
    // 安全使用
  }
});