JavaScript自定义事件：实现组件间高效通信

// 获取一个DOM元素作为事件目标
const myElement = document.getElementById('myDiv');

// 1. 定义事件名称
const CUSTOM_EVENT_NAME = 'myAppEvent';

// 2. 注册事件监听器
myElement.addEventListener(CUSTOM_EVENT_NAME, (event) => {
  console.log('自定义事件被触发！');
  console.log('事件对象:', event);

  // 如果是CustomEvent，可以访问detail属性
  if (event instanceof CustomEvent) {
    console.log('传递的数据:', event.detail);
  }
});

// 3. 在某个时刻分发事件
// 创建一个不带数据的Event
const simpleEvent = new Event(CUSTOM_EVENT_NAME);
myElement.dispatchEvent(simpleEvent); // 触发监听器，输出 "自定义事件被触发！"

// 创建一个带数据的CustomEvent
const dataEvent = new CustomEvent(CUSTOM_EVENT_NAME, {
  detail: {
    message: '数据已成功加载',
    timestamp: new Date().toISOString()
  }
});
myElement.dispatchEvent(dataEvent); // 再次触发监听器，并输出detail数据

// 定义统一的事件名称
const GAME_UPDATE_EVENT = 'gameUpdate';

/**
 * Grid 类：模拟游戏核心逻辑，监听信息更新事件。
 */
class Grid {
  constructor(container) {
    this.container = container;
    // 在构造函数中立即注册监听器，确保它始终处于激活状态
    this.container.addEventListener(GAME_UPDATE_EVENT, e => {
      console.log('Grid 收到游戏更新事件:', e);
      if (e instanceof CustomEvent) {
        console.log('更新详情:', e.detail);
        // 在这里更新Grid的状态或UI
        // 例如：this.updateGameDisplay(e.detail.gameData);
      }
    });
    console.log('Grid 监听器已设置。');
  }

  // 可以在Grid内部触发一些事件，例如游戏结束
  endGame(score) {
      const gameOverEvent = new CustomEvent('gameOver', {
          detail: { finalScore: score }
      });
      this.container.dispatchEvent(gameOverEvent);
      console.log('Grid 触发了游戏结束事件。');
  }
}

/**
 * Info 类：模拟信息面板，在数据更新时分发事件。
 */
class Info {
  constructor(container) {
    this.container = container;
    this.data = { clicks: 0, lastUpdate: null };
  }

  // 模拟数据更新，并分发自定义事件
  updateInfo(newData) {
    this.data.clicks++;
    this.data.lastUpdate = new Date().toISOString();
    Object.assign(this.data, newData); // 合并新数据

    // 每次更新时，独立创建并分发一个CustomEvent
    const updateEvent = new CustomEvent(GAME_UPDATE_EVENT, {
      detail: {
        gameData: { ...this.data } // 传递数据的副本
      }
    });
    this.container.dispatchEvent(updateEvent);
    console.log('Info 已分发游戏更新事件。');
  }
}

// 假设HTML中存在一个用于事件通信的DOM元素，例如：
// <div id="gameContainer" style="border: 1px solid blue; padding: 20px;">
//   点击这里触发更新
// </div>
const gameContainer = document.getElementById('gameContainer');

// 初始化类实例
const grid = new Grid(gameContainer);
const info = new Info(gameContainer);

// 模拟用户交互或外部系统触发数据更新
gameContainer.addEventListener('click', () => {
  info.updateInfo({ status: 'active', level: 1 });
});

// 也可以直接从外部调用Info的方法来触发事件
setTimeout(() => {
  info.updateInfo({ status: 'paused', level: 2 });
}, 2000);

// Grid 也可以触发事件
setTimeout(() => {
    grid.endGame(1000);
}, 4000);