<button class="btn1">按钮1</button>
<button class="btn2" data-index="1">按钮2</button>

const btn1 = document.querySelector(".btn1");
const btn2 = document.querySelector(".btn2");
btn1.addEventListener("click", () => {
  console.log("按钮1被点击了.");
});
btn2.addEventListener("click", (e) => {
  console.log("按钮2被点击了.");
  // 原生事件的detail表示短时间内事件触发的次数
  console.log("click detail:", e.detail);
});

const target = new EventTarget();
target.addEventListener("customEvent", (e) => {
  // 自定义事件的detail表示传递的自定义参数
  console.log("customEvent detail:", e.detail);
});
// 按钮1点击, 触发自定义对象的自定义事件 customEvent
btn1.addEventListener("click", () => {
  const params = {
    a: "a",
    b: "b",
  };
  target.dispatchEvent(
    new CustomEvent("customEvent", {
      detail: {
        index: btn2.dataset.index,
        ...params,
      },
    })
  );
});

如果直接双击btn2，detail就会打印1, 2触发事件的次数。如果慢慢点击只会打印1。

如果点击btn1，detail就会打印dispatchEvent函数中传递的detail对象。

先是快速双击btn2，然后慢慢点击两次 btn2，最后点击btn1，可以看到btn1的点击事件触发了自定义对象上绑定的自定义监听事件customEvent，注意这是区分大小写的，并且传递了自定义的对象。

按钮2被点击了.
click detail:1
按钮2被点击了.
click detail:2
按钮2被点击了.
click detail:1
按钮2被点击了.
click detail:1
按钮1被点击了.
customEvent detail:{index:'1',a:'a',b:'b'}