旧版浏览器需回退到 document.createEvent('CustomEvent') + initCustomEvent() 创建自定义事件；先用 typeof CustomEvent === 'function' 检测支持性，IE9+ 可用该方式，IE8 需进一步降级；detail 在 IE9–10 中严禁为 null/undefined/函数/DOM 节点，建议用 {} 或纯 JSON；目标元素须已插入 DOM，且监听器需提前绑定。
旧版浏览器（如 IE9–IE11、部分 Android 4.x WebView）不支持现代 CustomEvent 构造函数，需回退到 document.createEvent('CustomEvent') + initCustomEvent() 这一遗留方式来创建并触发自定义事件。关键不是“照搬写法”，而是理解兼容逻辑和限制边界。
判断是否需要回退到 createEvent
先检测原生 CustomEvent 是否可用，避免在现代浏览器中强行走旧路径：
- 用
typeof CustomEvent === 'function'判断 —— IE9 及以下返回undefined - 注意：IE9 支持
createEvent('CustomEvent')，但 IE8 不支持，此时需进一步降级（如用createEvent('Event')并手动挂载detail） - 不要仅靠 UA 字符串判断，UA 易伪造且不可靠
正确调用 createEvent 和 initCustomEvent
若检测到不支持原生 CustomEvent，按标准 DOM Level 2 Events 规范操作：
- 调用
document.createEvent('CustomEvent')创建事件对象（IE9+ 安全） - 立即调用
event.initCustomEvent(type, bubbles, cancelable, detail) -
type必须是字符串，如'api-response' -
bubbles和cancelable必须为布尔值（不能省略或传字符串"true"） -
detail在 IE9–IE10 中严禁为null、undefined、函数或 DOM 节点；建议默认用空对象{}或纯 JSON 数据
封装一个安全的创建函数
把判断和初始化逻辑收进一个函数，避免每次手动写分支：
function createCustomEvent(type, bubbles, cancelable, detail) {
if (typeof CustomEvent === 'function') {
return new CustomEvent(type, { bubbles, cancelable, detail });
}
const event = document.createEvent('CustomEvent');
// IE9–10 对 detail 敏感，兜底处理
const safeDetail = detail == null ? {} : detail;
event.initCustomEvent(type, !!bubbles, !!cancelable, safeDetail);
return event;
}
使用时保持一致：element.dispatchEvent(createCustomEvent('loaded', true, false, { data: 'ok' }));
容易忽略的执行前提
即使事件创建成功，派发失败也很常见，需确认以下几点：
- 目标元素必须已插入 DOM，否则
dispatchEvent静默失败（无报错） - 若监听的是自定义事件，确保
addEventListener('loaded', handler)已提前绑定 - IE9 不支持事件对象上的
composed属性，Shadow DOM 场景下不适用 - 避免在
detail中传入window、document或任何跨全局对象，旧引擎可能抛异常
