HTML标签不支持直接写onmyevent等自定义事件属性，必须用JavaScript的addEventListener注册；监听名、触发名、派发目标三者须严格一致，且应使用CustomEvent以携带detail数据。
HTML 中不能直接写自定义事件监听的原生属性
HTML 标签本身不支持像 onclick 那样直接用 onmyevent 绑定自定义事件。浏览器只识别标准的、内置的事件属性（如 onclick、oninput），对非标准名称会忽略，也不会触发任何行为。
自定义事件必须用 JavaScript 的 addEventListener 注册
要让元素响应自定义事件（比如 "data-loaded" 或 "user-authenticated"），必须在 JS 中调用 addEventListener，且事件名不能带 on 前缀：
element.addEventListener("data-loaded", handler);
常见错误包括：
- 在 HTML 里写
<div ondata-loaded="handle()"></div>—— 完全无效，浏览器当普通属性处理 - 在 JS 中写
element.addEventListener("ondata-loaded", ...)—— 多写了on，监听不到触发的"data-loaded" - 触发时用了
dispatchEvent(new Event("ondata-loaded"))—— 同样因名称不匹配而失败
想“伪内联”绑定？可以但不推荐
如果真想在 HTML 里“就近写逻辑”，只能靠标准属性（如 data-）配合全局函数，例如：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<button data-event-name="user-login" onclick="triggerCustomEvent(this)">登录</button>
再配一个全局函数：
function triggerCustomEvent(el) {
const name = el.dataset.eventName;
el.dispatchEvent(new CustomEvent(name, { detail: { from: "inline" } }));
}
这种写法的问题很实际：
- 依赖全局函数，破坏模块封装
-
onclick本质还是监听原生点击，不是真正“绑定自定义事件” - 无法传递复杂参数，
detail只能靠硬编码或简单字符串解析
真正可靠的流程：触发 + 监听 + 派发三步缺一不可
自定义事件要生效，三个环节必须对齐：
- 监听端：用
addEventListener("my-event", handler)，名称严格一致 - 触发端：用
element.dispatchEvent(new CustomEvent("my-event", { detail: ... })) - 派发目标：确保
dispatchEvent调用在正确元素上（常被误用为document.dispatchEvent却忘了监听在子元素）
特别注意：用 CustomEvent 而不是 Event，否则 detail 字段不会被携带；IE 不支持 CustomEvent 构造函数，需 polyfill 或改用 document.createEvent。
