dialog 的 close 事件必须直接监听 dialog 元素本身，不可委托；需在 close() 调用前绑定，且 close 与 cancel 是两个独立事件，分别对应程序关闭和用户放弃操作， returnvalue 行为不同。
dialog 的 close 事件必须直接监听元素本身
不能靠事件委托，也不能监听 document 或父容器 —— close 事件只在 dialog 元素上触发，且不冒泡到祖先节点（虽然规范说它冒泡，但实践中几乎无法可靠捕获）。绑定晚了会丢事件，比如在 close() 调用之后才 addEventListener('close', ...)，就收不到。
常见错误是写成：
document.addEventListener('close', () => { /* 永远不会执行 */ });
正确写法是：
const dlg = document.getElementById('myDialog');<br>dlg.addEventListener('close', () => {<br> console.log('已关闭，returnValue:', dlg.returnValue);<br>});
- 监听代码可在
showModal()前或后执行，只要在close()调用前完成绑定即可 - 如果 dialog 是动态创建的（
document.createElement('dialog')），需先appendChild再绑定，否则监听无效 - 不要重复绑定，否则同一事件会触发多次
close 事件和 cancel 事件不是一回事
很多人以为点遮罩、按 Esc 都触发 close，其实不是：close() 调用触发 close 事件；而按 Esc 或点击 backdrop 触发的是 cancel 事件 —— 这是两个独立事件，都得单独监听。
如果你只监听 close，那用户按 Esc 或点遮罩后，你的清理逻辑（比如重置表单）就完全没执行。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
dlg.addEventListener('close', handler)：响应dlg.close()调用 -
dlg.addEventListener('cancel', handler)：响应 Esc 键、backdrop 点击（仅showModal()激活时） - 两者都会让
dlg.open变为false，但returnValue行为不同：close()前设的值会被保留；cancel触发时returnValue始终为空字符串（除非你手动赋值）
监听 click 判断 backdrop 点击是错的，别这么干
网上很多教程教你在 dialog 上监听 click，再判断 event.target === dialog 来关弹窗。这方法在 Safari 和部分 Chrome 版本里根本不可靠 —— 因为 backdrop 是伪元素 ::backdrop，点击它时 event.target 并不等于 dialog 元素，而是 null 或 document，导致判断失效。
真正兼容的做法只有一个：依赖浏览器原生行为 + 监听 cancel 事件。
- 确保用的是
showModal()，不是show() - 显式监听
cancel事件，把它当作“用户放弃操作”的统一入口 - 如果真要区分关闭来源（比如“点遮罩” vs “按 Esc”），只能靠键盘事件监听
keydown判断event.key === 'Escape'，其余都归为 backdrop 关闭
关闭后读取 input 值要趁早，别等 close 事件
close 事件触发时，dialog 已隐藏，但 DOM 还在，input 值也还在。可问题在于：如果用户快速点击确认按钮又立刻失焦，或者用了自动聚焦逻辑，close 事件回调里读到的值可能不是最终值。
更稳妥的方式是在确认按钮点击时立即抓取：
document.getElementById('confirm-btn').onclick = () => {<br> const value = document.getElementById('myInput').value;<br> dlg.returnValue = 'confirm';<br> dlg.close();<br> // 此处 value 就是用户提交那一刻的值<br>};
- 不要在
close或cancel事件里读表单 —— 它们只表示“关闭发生了”，不保证输入已完成 - 所有交互状态（如复选框
checked、textarea内容、自定义组件内部 state）都不会被close()自动重置，必须手动清空或保存 - 如果 dialog 里有
form[method="dialog"]，submit 会自动触发close()并设置returnValue为表单name，但依然要自己读取字段值
关闭逻辑看着简单，实际最易出问题的是事件监听时机和 input 值捕获顺序 —— 多数 bug 都不是 dialog 不支持，而是监听挂晚了、事件选错了、或者读值读岔了时间点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
