HTML原生不支持onclack等自定义事件属性，必须用CustomEvent创建、dispatchEvent触发、addEventListener监听；detail字段传结构化数据，bubbles和cancelable控制冒泡与取消；事件名须全小写连字符。
HTML 原生不支持 onclack、ondataready 这类自定义事件属性，写在标签里完全无效——浏览器直接忽略，不会解析也不会绑定。必须用 JavaScript 创建、分发、监听，才能真正生效。
用 CustomEvent 构造函数创建事件对象
这是现代标准做法，兼容所有主流浏览器（IE9+ 需 polyfill，但 IE 已淘汰）。关键点是 detail 字段：它允许你传任意结构化数据，比如对象、数组、布尔值。
常见错误是漏掉 detail 或传错类型（如传字符串却期望对象）：
-
new CustomEvent('user-login')—— 没带detail，监听方收不到任何数据 -
new CustomEvent('user-login', { detail: 'success' })—— 传字符串，但业务逻辑可能需要{ userId: 123, token: 'xxx' } - 正确写法：
new CustomEvent('user-login', { detail: { userId: 123, token: 'abc123' }, bubbles: true, cancelable: false })
bubbles: true 决定事件是否向上冒泡（对嵌套组件通信很重要）；cancelable: false 表示该事件不能被 preventDefault() 阻止（多数自定义事件无需取消）。
立即学习“前端免费学习笔记（深入）”；
用 dispatchEvent() 在目标元素上触发
事件对象创建完后，必须显式调用 dispatchEvent() 才能“发出”。它只接受一个参数：事件对象本身。不能传字符串或事件名。
容易踩的坑：
- 目标元素不存在或为
null：比如document.getElementById('missing').dispatchEvent(evt)会报错 - 在非 DOM 元素上调用：如
{}.dispatchEvent(evt)或Array.dispatchEvent(evt)直接抛TypeError - 误用 jQuery 的
.trigger()：它底层仍是调用原生dispatchEvent，但若混用原生监听器和 jQuery 触发，需确保事件名一致且无大小写偏差
示例（安全写法）：
const el = document.getElementById('app');
if (el) {
el.dispatchEvent(new CustomEvent('data-loaded', { detail: { items: [] } }));
}
用 addEventListener() 监听自定义事件
监听必须在触发前注册，否则事件会“飞走”——没有监听器接收，就彻底丢失。这点和 onclick 属性不同，后者是声明即绑定。
注意事项：
- 事件名要完全匹配（区分大小写）：
'DataLoaded'≠'data-loaded'≠'dataloaded' - 监听器必须挂载在**同一元素**或其祖先（如果
bubbles: true）上；不能监听子元素触发、父元素没设冒泡的事件 - 避免重复绑定：多次调用
addEventListener('my-event', handler)会注册多个相同 handler，建议用removeEventListener清理，或封装成单次绑定逻辑
监听时可直接解构 event.detail：
el.addEventListener('data-loaded', ({ detail }) => {
console.log(detail.items.length); // 不用写 event.detail.items
});
为什么不用 createEvent + initEvent？
这套旧 API（如 document.createEvent('CustomEvent')）已被废弃多年，MDN 明确标记为“deprecated”。它冗长、易错，且 initEvent 无法设置 detail —— 你得手动往事件对象上挂属性，而这些属性不会自动出现在监听器的 event 参数里，除非你用 event.detail 以外的方式约定（比如 event.data），这破坏了标准一致性。
现在唯一推荐路径就是：new CustomEvent() → dispatchEvent() → addEventListener()。别绕弯，也别为了兼容早已退出市场的浏览器加 polyfill。
最常被忽略的一点：自定义事件名建议全小写加连字符（如 api-error、form-submitted），避免和未来 HTML 标准事件冲突，也便于阅读和调试。
