JavaScript自定义事件通过Event构造函数、dispatchEvent和addEventListener原生实现，支持CustomEvent携带detail数据，可作用于DOM元素或继承EventTarget的对象，需注意作用域隔离与命名规范。
JavaScript 中自定义事件的分发与监听，核心靠 Event 构造函数 + dispatchEvent + addEventListener 实现，不需要依赖框架，原生即可完成。
创建并派发自定义事件
用 CustomEvent 构造函数创建带数据的事件对象，再调用目标元素（或任意 EventTarget 实例）的 dispatchEvent 方法触发它。
-
CustomEvent允许传入事件名和一个配置对象，其中detail字段用于携带任意结构化数据 - 派发目标可以是 DOM 元素、
window、document，甚至普通对象（只要它继承自EventTarget） - 示例：const event = new CustomEvent('userLogin', { detail: { id: 123, name: 'Alice' } }); document.dispatchEvent(event);
监听自定义事件
使用标准的 addEventListener 监听你定义的事件名，回调函数中通过 event.detail 获取传递的数据。
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
- 监听位置需与派发目标一致（比如在
document上派发，就在document上监听） - 支持捕获阶段和冒泡阶段，可通过第三个参数控制（如
{ once: true }可设为一次性监听） - 示例：document.addEventListener('userLogin', e => console.log(e.detail.name));
扩展：让任意对象支持事件机制
如果想让非 DOM 对象（如类实例）也能触发/监听事件，可让它继承 EventTarget。
立即学习“Java免费学习笔记（深入）”；
- ES6 class 可直接
extends EventTarget，然后调用this.dispatchEvent()和this.addEventListener() - 注意：IE 不支持
EventTarget构造函数，需 polyfill 或改用第三方事件总线（如 mitt） - 示例：class Store extends EventTarget { login(user) { this.dispatchEvent(new CustomEvent('change', { detail: user })); } }
注意事项与常见陷阱
自定义事件不是“全局广播”，它严格遵循事件流模型，不会自动跨作用域传播。
- 在 iframe 或 shadow DOM 中派发的事件，默认不会穿透到外部上下文，需手动转发
- 事件名区分大小写，且不能包含空格或特殊字符（推荐用 kebab-case 或 camelCase）
- 避免频繁创建大量事件实例；高频场景可复用
CustomEvent实例或用轻量级事件总线替代
