如何用 CustomEvent 封装一个带有状态回调的原生对话框-js教程-PHP中文网

用customevent封装原生dialog实现带状态回调：showconfirmdialog创建含唯一id的dialog，绑定按钮事件，点击后调用close()再派发detail.confirmed为true/false的dialogconfirmed事件；调用方需先监听再showmodal()。

如何用 customevent 封装一个带有状态回调的原生对话框

用 CustomEvent 封装带状态回调的原生对话框，核心是把“用户点击确定/取消”这类操作转化为可监听的自定义事件，并让调用方通过事件对象获取操作结果（如 detail: { confirmed: true }）。不依赖第三方库，纯原生实现，轻量且可控。

创建可复用的对话框函数

封装一个函数（例如 showConfirmDialog），内部创建 dialog 元素、注入 HTML 结构、绑定按钮事件，并在用户交互后派发带状态的 CustomEvent：

使用 <dialog></dialog> 标签（现代浏览器支持良好，caniuse 数据显示已覆盖 95%+）
每个对话框实例应有唯一 ID 或上下文标识，避免事件冲突
按钮点击后立即调用 dialog.close()，再派发事件，确保状态同步

派发带确认状态的 CustomEvent

在“确定”和“取消”按钮的点击处理中分别派发不同状态的事件：

点击确定 → dispatchEvent(new CustomEvent('dialogconfirmed', { detail: { confirmed: true } }))
点击取消或按 Esc 关闭 → dispatchEvent(new CustomEvent('dialogconfirmed', { detail: { confirmed: false } }))
推荐统一用一个事件名（如 dialogconfirmed），靠 detail.confirmed 区分结果，语义清晰

调用方监听并处理回调逻辑

调用时先监听事件，再打开对话框。注意：事件需绑定在 dialog 元素上（非 window 或 document），保证作用域隔离：

const dialog = showConfirmDialog('确定删除这条记录？');
dialog.addEventListener('dialogconfirmed', (e) => {
  if (e.detail.confirmed) {
    console.log('执行删除操作');
  } else {
    console.log('用户取消');
  }
});
dialog.showModal(); // 触发显示

⚠️ 关键点：监听必须在 showModal() 之前完成，否则可能错过同步触发的事件（<dialog></dialog> 的 close 事件是同步的，但自定义事件建议也按此习惯）。