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

• 坚持使用原生
  元素：无需顾虑浏览器兼容性，目前所有现代浏览器均已提供良好支持，覆盖率超过 95%。
• 确保对话框实例的唯一性：为每个生成的对话框分配一个唯一的 ID 或上下文标识符。这是防止多个对话框实例之间事件监听器相互干扰的关键措施。
• 遵循正确的执行顺序：在按钮点击后，应先调用 dialog.close() 方法关闭对话框的视觉呈现，紧接着派发携带状态信息的自定义事件。这保证了界面变化与逻辑状态同步更新。

第二步：派发携带确认状态的自定义事件

接下来，我们需要定义如何将用户交互转化为事件。在“确定”和“取消”按钮的点击事件处理函数中，分别派发状态不同的事件：

• 当用户点击“确定”按钮时，派发一个名为 dialogconfirmed 的自定义事件，并将 event.detail.confirmed 属性设置为 true。
• 当用户点击“取消”按钮，或通过按下 ESC 键、点击对话框外部遮罩层关闭时，同样派发 dialogconfirmed 事件，但将 event.detail.confirmed 属性设置为 false。

推荐统一使用一个事件名称（如 dialogconfirmed），仅通过 detail 对象内的布尔值来区分操作结果。这种设计语义明确，能使事件监听逻辑更加简洁清晰。

第三步：在调用方监听并处理回调

使用封装好的对话框函数时，调用顺序至关重要。标准流程是：先为返回的对话框元素绑定事件监听器，然后再将其显示出来。

// 获取对话框实例
const dialog = showConfirmDialog('确定要删除这条记录吗？');
// 第一步：预先监听自定义事件
dialog.addEventListener('dialogconfirmed', (event) => {
  if (event.detail.confirmed) {
    console.log('用户确认，执行删除操作');
    // 此处可接入实际的业务逻辑，如发起 API 请求
  } else {
    console.log('用户已取消操作');
  }
});
// 第二步：显示模态对话框
dialog.showModal();

需要特别注意：事件监听器务必在调用 showModal() 方法之前完成绑定。虽然原生