如何在不同JS文件中实现依赖另一事件返回值的事件监听

我有一个绑定了click事件监听器的按钮，该监听器定义在example1.js中，代码如下：

button.addEventListener('click', () => {
  const confirmation = confirm('Are you sure you want to do that?');

  // <some code here>

});

需要在example2.js中为同一按钮添加逻辑，该逻辑依赖于第一个监听器返回的confirmation值，预期代码结构如下：

// 需要根据第一个监听器的confirmation值执行逻辑
if (<confirmation from 1st listener>) {
  // do some stuff here...
}

我了解自定义事件（Custom Event）的基础用法，但现有教程都是单文件场景，不清楚跨JS文件时如何实现该逻辑。

具体实现方案 #

1. 在example1.js中派发自定义事件

在第一个click监听器内部，获取到confirmation值后，直接通过按钮元素派发自定义事件，将确认状态通过detail字段传递：

button.addEventListener('click', () => {
  const confirmation = confirm('Are you sure you want to do that?');

  // 创建并派发自定义事件，传递确认状态
  const confirmEvent = new CustomEvent('buttonConfirmStatus', {
    detail: { isConfirmed: confirmation },
    // 若需要事件冒泡到父元素，可设置bubbles: true，默认false
    bubbles: false
  });
  button.dispatchEvent(confirmEvent);

  // 执行原有逻辑
  // <some code here>
});

2. 在example2.js中监听自定义事件

无需再绑定额外的click监听器，直接监听自定义事件即可获取到确认状态：

// 监听自定义事件，接收确认状态
button.addEventListener('buttonConfirmStatus', (event) => {
  const { isConfirmed } = event.detail;
  if (isConfirmed) {
    // 执行依赖确认状态的逻辑
    console.log('用户确认了操作，执行后续逻辑');
    // do some stuff here...
  }
});

注意事项 #

• 自定义事件名称（如buttonConfirmStatus）需在两个文件中保持一致
• 确保两个JS文件中都能正确获取到目标button元素（比如通过document.getElementById('buttonId')，且脚本执行时机在元素渲染完成后）
• 自定义事件的detail字段可以传递任意类型的数据，不止限于布尔值

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