CustomEvent是开发者手动创建、携带数据并派发的解耦通信机制，核心为创建（new CustomEvent(type, {detail: data})）、监听（addEventListener同目标）、派发（dispatchEvent），需注意target一致、detail传参、冒泡配置及IE兼容性。
自定义事件（CustomEvent）是 JavaScript 事件系统中用于主动通知、解耦通信的核心能力。它不是浏览器自动触发的交互行为（如 click），而是由开发者手动创建、携带数据、指定目标并派发的“信号”。理解它，关键在于抓住三个动作：创建、绑定监听、派发。
怎么创建一个带数据的 CustomEvent
用 new CustomEvent(type, options) 构造，其中：
-
type 是字符串事件名，比如
'user-login'或'data-updated'，必须唯一且语义清晰； -
options 是配置对象，最常用的是
detail字段——它是唯一允许传入任意数据（对象、数组、字符串等）的入口； - 如需冒泡或可取消，得显式写
bubbles: true和cancelable: true，默认两者都是false。
示例：const evt = new CustomEvent('api-fail', { detail: { code: 500, msg: 'Network error' } });
怎么让别的代码收到这个事件
监听必须在派发前完成，且要绑定到**同一个目标对象**上：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 监听用
element.addEventListener('api-fail', handler)，handler 中通过e.detail取出数据； - 目标可以是任何
EventTarget实例：DOM 元素（document、div）、window，甚至继承了EventTarget的自定义类； - 不推荐全局用
document监听所有自定义事件，容易冲突；建议限定作用域，比如只在组件根节点上派发和监听。
怎么正确派发事件
调用目标对象的 dispatchEvent() 方法：
立即学习“Java免费学习笔记（深入）”；
- 它接收一个
Event或CustomEvent实例，返回布尔值（true表示未被阻止，false表示被preventDefault()阻止）； - 派发后，事件按 DOM 传播规则走：捕获 → 目标 → 冒泡（仅当
bubbles: true）； - 如果想让非 DOM 对象也能发事件，让类
extends EventTarget即可，实例直接拥有dispatchEvent和addEventListener。
常见误区提醒
注意几个容易出错的地方：
- 用
new Event('xxx')创建的事件没有detail，传不了数据，优先选CustomEvent； - 派发后监听器没响应？检查是否监听在同一个对象上、是否拼错事件名、是否在派发前就绑定了监听；
-
e.preventDefault()对自定义事件本身无实际效果，但可用于标记“该事件已被处理”，配合业务逻辑判断； - IE9– 不支持
CustomEvent构造函数，需用document.createEvent('CustomEvent')+initCustomEvent()降级兼容。
