25. 自定义事件与发布订阅：组件通信

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

三、知识点提醒

自定义事件适合模块之间解耦。
`detail` 可以携带事件数据。
小项目可用 document 当事件总线，大项目可用专门状态管理。

四、练习建议

创建 `cart:updated` 事件。
让多个模块同时监听同一个事件。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/25-custom-events.js，下面同步展示，方便学习和复制。

// 页面 25：CustomEvent 自定义事件
const eventBus = document;
const inquiryOutput = document.querySelector('#p25-output');
let inquiryCount = 0;

function emitInquiryChanged(detail) {
  const event = new CustomEvent('inquiry:changed', { detail });
  eventBus.dispatchEvent(event);
}

function addInquiryItem(productName) {
  inquiryCount += 1;
  emitInquiryChanged({ count: inquiryCount, productName, action: 'add' });
}

function clearInquiry() {
  inquiryCount = 0;
  emitInquiryChanged({ count: inquiryCount, productName: '', action: 'clear' });
}

eventBus.addEventListener('inquiry:changed', (event) => {
  const { count, productName, action } = event.detail;
  inquiryOutput.textContent = action === 'add'
    ? `已加入：${productName}\n当前询盘数量：${count}`
    : '询盘已清空';
});

document.querySelector('#p25-add').addEventListener('click', () => addInquiryItem('Wall Panel Sample'));
document.querySelector('#p25-clear').addEventListener('click', clearInquiry);