如何为Toast通知的动作按钮绑定可自定义的点击事件？

我正在尝试创建带有动作按钮的Toast通知，如何让UI中的按钮点击后生效？我希望动作事件能根据不同场景执行不同操作，因此优先保持可修改性。

原实现代码 #

export const ToastAction = {
    init() {
      this.hideTimeout = null;
  
      this.el = document.createElement("div");
      this.el.className = "toastAction";
      document.body.appendChild(this.el);
    },
  
    show(message, action, state) {
      clearTimeout(this.hideTimeout);
  
      this.el.className = "toastAction toast--visible";

      const text = document.createElement("p");
      text.textContent = message;
      this.el.appendChild(text);

      const button = document.createElement("button");
      button.textContent = action;
      this.el.appendChild(button);
  
      if (state) {
        this.el.classList.add(`toast--${state}`);
      }
  
    //   this.hideTimeout = setTimeout(() => {
    //     this.el.classList.remove("toast--visible");
    //   }, 5000);                  
    }
  };
  
  document.addEventListener("DOMContentLoaded", () => ToastAction.init());

// 期望的调用方式（原尝试）
ToastAction.show("message", "Text", "success").onclick(alert("clicked!"))

修改方案 #

要实现按钮点击生效且支持自定义操作，核心是让show方法支持传入点击回调，并优化Toast的复用逻辑：

修改后的代码 #

export const ToastAction = {
    init() {
      this.hideTimeout = null;
  
      this.el = document.createElement("div");
      this.el.className = "toastAction";
      document.body.appendChild(this.el);
    },
  
    show(message, action, state, actionCallback) {
      clearTimeout(this.hideTimeout);
      // 清空容器旧内容，避免重复添加元素
      this.el.innerHTML = "";
      this.el.className = "toastAction toast--visible";

      const text = document.createElement("p");
      text.textContent = message;
      this.el.appendChild(text);

      const button = document.createElement("button");
      button.textContent = action;
      // 绑定自定义点击回调
      if (typeof actionCallback === 'function') {
        button.addEventListener('click', () => {
          actionCallback();
          // 可选：点击后自动隐藏Toast
          // this.el.classList.remove("toast--visible");
        });
      }
      this.el.appendChild(button);
  
      if (state) {
        this.el.classList.add(`toast--${state}`);
      }

      // 恢复自动隐藏逻辑（可选）
      this.hideTimeout = setTimeout(() => {
        this.el.classList.remove("toast--visible");
      }, 5000);

      // 返回按钮实例，支持后续动态绑定事件
      return button;
    }
  };
  
  document.addEventListener("DOMContentLoaded", () => ToastAction.init());

调用示例 #

场景1：弹出提示

ToastAction.show(
  "操作成功", 
  "查看详情", 
  "success", 
  () => {
    alert("查看详情被点击！");
  }
);

场景2：执行页面跳转

ToastAction.show(
  "有新消息", 
  "前往查看", 
  "info", 
  () => {
    window.location.href = "/messages";
  }
);

场景3：后续动态绑定事件

const toastBtn = ToastAction.show("文件已保存", "重新编辑", "success");
toastBtn.addEventListener('click', () => {
  console.log("开始重新编辑文件");
});

关键改动说明 #

• 新增actionCallback参数：调用方可根据不同场景传入自定义逻辑，完全满足可修改性需求
• 清空Toast容器旧内容：避免多次调用show后堆积重复元素
• 绑定点击事件：通过addEventListener给按钮绑定回调，支持任意函数逻辑
• 返回按钮实例：提供额外灵活性，支持后续动态修改或绑定事件

内容的提问来源于stack exchange，提问作者HarryNC