能否创建与原生事件同名的自定义事件？点击事件触发两次咨询

一、创建与原生事件同名的自定义事件是否合规？ #

完全合规！DOM规范并没有禁止创建和原生事件（比如click）同名的自定义事件，浏览器允许你定义这类事件，也能正常通过dispatchEvent派发。不过这里有个容易踩的坑——就是你遇到的事件触发两次的问题，这是因为原生事件和自定义事件会被同一个监听器捕获到。

二、为什么会触发两次？ #

你的代码给button绑定了click事件监听器，当你操作时会发生这几步：

1. 手动点击按钮，浏览器触发原生click事件；
2. 监听器捕获到原生事件后，你又派发了一个同名的自定义click事件；
3. 这个自定义事件因为设置了bubbles: true，会向上冒泡，同时也会被当前元素的click监听器再次捕获，于是就出现了两次触发的情况。

看你代码里的判断逻辑if(!event.detail || event.detail && !event.detail.fromComponent)，其实你已经在尝试区分原生和自定义事件了，但可能细节没处理到位，导致还是进入了派发分支，形成循环触发。

三、解决办法 #

1. 给自定义事件加唯一标识，彻底区分 #

在创建自定义事件时，通过detail字段添加专属标记，比如fromComponent: true，然后在监听器里严格判断，只有原生事件才执行派发逻辑：

button.addEventListener("click", (event)=>{
  // 只有原生click事件（无fromComponent标记）才执行派发
  if(!event.detail || (event.detail && !event.detail.fromComponent)){
    let eventObject = new CustomEvent("click", {
      bubbles: true,
      detail: {
        fromComponent: true, // 添加专属标记
        extraData: "你的额外数据" // 携带的自定义内容
      }
    });
    button.dispatchEvent(eventObject);
  } else {
    // 处理自定义事件的逻辑
    console.log("自定义click事件触发，数据：", event.detail.extraData);
  }
});

这样自定义事件进来时，event.detail.fromComponent为true，不会再进入派发分支，避免循环触发。

2. 换个独特的事件名（更简洁的方案） #

如果不是必须用click作为事件名，直接用一个自定义名称比如custom-click，从根源上避免和原生事件冲突：

button.addEventListener("click", (event)=>{
  let eventObject = new CustomEvent("custom-click", {
    bubbles: true,
    detail: {
      extraData: "你的额外数据"
    }
  });
  button.dispatchEvent(eventObject);
});

// 单独监听自定义事件
button.addEventListener("custom-click", (event)=>{
  console.log("自定义事件触发，数据：", event.detail.extraData);
});

总结 #

• 同名自定义事件合规，但容易和原生事件混淆导致重复触发；
• 推荐通过detail字段添加标识区分，或者直接使用独特的自定义事件名，后者更简洁不易出错。

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