dialog默认不支持自定义事件冒泡，需显式在dialog上dispatchevent且bubbles:true；事件监听须提前绑定或用requestanimationframe延迟；数据通过event.detail传递；推荐用{once:true}自动清理监听器。
dialog元素默认不支持自定义事件冒泡
直接在 <dialog></dialog> 内部触发 dispatchEvent，外部监听不到，因为 <dialog></dialog> 是一个“封闭”的呈现上下文（类似 <iframe></iframe> 的部分行为），其内部事件默认不会穿透到父文档。常见表现是：点击弹窗里的确认按钮，document.addEventListener('confirm', ...) 完全没反应。
解决思路不是强行“透传”，而是主动通知——让 dialog 内部逻辑显式调用外部函数或派发 在 document 或 dialog 父级节点上可捕获的事件：
- 推荐方式：在 dialog 元素上直接
dispatchEvent，并确保bubbles: true - 避免把事件派发到
document，否则难以精准区分来源（多个 dialog 共存时容易冲突） - 不要依赖
event.target自动向上找 dialog，因为用户可能从 backdrop 点击关闭，此时 target 是<dialog></dialog>自身，但你可能想区分「点按钮」和「点遮罩」
showModal() 后无法立即监听自定义事件
调用 dialog.showModal() 是同步的，但浏览器需要一帧时间完成渲染与焦点管理。如果紧接着就 dialog.addEventListener('submit', ...)，大概率会漏掉首次交互（比如用户极快地按了回车提交）。
安全做法是：在 showModal() 之前就绑定好事件监听器，或者用 requestAnimationFrame 延迟一小步再监听：
const modal = document.querySelector('dialog');
modal.addEventListener('confirm', handler); // ✅ 提前绑定
modal.showModal();
// 或者（不推荐但可行）
modal.showModal();
requestAnimationFrame(() => {
modal.addEventListener('confirm', handler); // ⚠️ 有小概率仍错过
});
如何让 dialog 传递数据给调用方
原生 <dialog></dialog> 没有内置的“返回值”机制（不像 window.prompt()），必须靠约定好的通信通道。最轻量、可控的方式是：把数据挂在 event.detail 上，并由调用方在事件回调里取。
典型流程：
- 打开前，给
<dialog></dialog>添加唯一标识（如data-id="user-edit-123"） - 内部表单提交时，构造
new CustomEvent('submit', { detail: { id: 123, name: 'Alice' }, bubbles: true }) - 外部监听时，用
event.target === modal校验来源，再读event.detail
注意：detail 只能传可序列化数据（不能传 DOM 节点、函数等），且建议做浅拷贝防止被意外修改。
关闭 dialog 时别忘了手动清理事件监听
<dialog></dialog> 不会自动销毁，即使调用了 close() 或用户按 Esc，DOM 节点依然存在。如果反复打开同一 dialog 实例，又每次都 addEventListener，会导致监听器重复注册，一次操作触发多次回调。
两个务实方案：
- 每次打开前先
removeEventListener（需保存 handler 引用） - 更简单：用
{ once: true }选项，尤其适合「提交即关闭」场景
例如：modal.addEventListener('confirm', handleSubmit, { once: true }); —— 触发后自动解绑，干净利落。
真正麻烦的是异步关闭（比如提交后等 API 返回才 close），这时得自己记状态，避免用户连点导致多次提交；而事件监听是否清理，往往比样式重置更容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
