javascript中派发自定义dom事件需三步：创建事件对象（customevent传数据，event用于无参信号）、绑定监听器、调用dispatchevent；事件仅在目标节点触发并依bubbles设置冒泡，监听器须提前注册，禁用已废弃的createevent/initevent。
在 JavaScript 中派发并触发自定义 DOM 事件，核心是三步：创建事件对象、绑定监听器、调用 dispatchEvent 方法。关键不在于“能不能”，而在于选对构造函数、设好参数、发到正确的目标节点。
用 CustomEvent 创建带数据的自定义事件
这是最常用也最推荐的方式，尤其当你需要传递参数时。
-
必须使用
CustomEvent构造函数（不是Event），才能通过detail属性传任意数据（对象、数组、字符串等） -
设置
bubbles: true才能让事件冒泡到父元素，方便在祖先节点统一监听 -
设置
cancelable: true后，监听函数中可用event.preventDefault()阻止后续逻辑
示例：
const myEvent = new CustomEvent('user-action', {
detail: { action: 'save', id: 1001 },
bubbles: true,
cancelable: true
});
// 在 document 上监听（全局范围）
document.addEventListener('user-action', (e) => {
console.log('收到动作：', e.detail.action); // 输出：save
if (e.detail.action === 'save') e.preventDefault(); // 可选拦截
});
// 触发事件（发给 document）
document.dispatchEvent(myEvent);
用 Event 创建简单无参的自定义事件
如果只是通知某件事发生了，不需要附带数据，用 Event 更轻量。
-
Event不支持detail，适合纯信号类事件（如'loading-start'、'theme-changed'） - 同样可配置
bubbles和cancelable，行为与CustomEvent一致 - 注意：事件名不能含空格或特殊符号，建议用短横线分隔（kebab-case）
示例：
const loadingStart = new Event('loading-start', { bubbles: true });
document.addEventListener('loading-start', () => {
console.log('加载开始');
});
// 发给某个具体元素（如 #app），而非 document
document.getElementById('app').dispatchEvent(loadingStart);
dispatchEvent 必须作用于有监听器的目标节点
事件不会“自动广播”，它只在你调用 dispatchEvent 的那个 DOM 节点上触发，并按 DOM 树路径传播（若设了 bubbles: true）。
- 想让整个页面都能监听？就发给
document或window - 想限定在组件内部通信？发给该组件的根容器（如
shadowRoot.host或div#my-widget） - 监听器必须在
dispatchEvent之前注册好，否则会错过事件
避免过时写法：不用 createEvent + initEvent
老教程里常见的 document.createEvent('Event') 和 event.initEvent() 已被标准废弃，现代浏览器虽可能兼容，但不应再使用。
- MDN 明确标注为 Deprecated
- 所有主流浏览器已全面支持
Event()和CustomEvent()构造函数 - 构造函数写法更简洁、语义清晰、参数可控
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
