闭包捕获组件ID实现局部单例监听机制：通过工厂函数创建绑定ID的监听器，委托事件+ID过滤，内聚处理逻辑，支持手动destroy销毁，统一校验ID响应原生与自定义事件。
直接用闭包捕获组件 ID，就能让事件监听器只响应本组件范围内的行为，不干扰其他同名或同类组件——这不是全局事件总线，而是“每个组件自己管自己”的局部单例监听机制。
用闭包锁定组件 ID，隔离监听作用域
核心是把组件唯一标识（如 id、uuid 或 data-key）作为参数传入一个工厂函数，该函数返回的监听器内部通过闭包持有这个 ID，所有事件判断都基于它：
- 监听器注册时，只处理
event.target或event.detail中携带相同 ID 的事件 - 避免使用
document.addEventListener直接监听全局 click，改用委托 + ID 过滤 - 例如：
const listener = createComponentListener('modal-123');，后续所有操作都天然绑定到这个 ID
监听逻辑内聚在闭包中，不依赖外部状态
闭包不仅保存 ID，还封装了事件处理所需的所有上下文：
- 比如 DOM 节点引用、配置项、回调队列，都定义在工厂函数作用域内，不暴露给外部
- 监听器方法（如
onConfirm、onCancel）是闭包内定义的函数，自动绑定当前组件上下文 - 无需
this或 class 实例，也不用担心多个组件调用时的this指向错乱
支持手动销毁，防止内存泄漏和跨组件误触发
每个监听器实例都提供 destroy() 方法，清理自身注册的事件和闭包持有的引用：
-
destroy()内部调用element.removeEventListener或清除委托监听器中的匹配分支 - 闭包变量（如
instance、handlers）在销毁后可被 GC 回收 - 组件卸载时调用一次
listener.destroy()，就彻底解耦，不会影响其他组件监听器
适用于自定义事件与 DOM 事件混合场景
既可监听原生事件（如点击按钮），也能响应自定义事件（如 dispatchEvent(new CustomEvent('submit', { detail: { id: 'modal-123' } }))）：
- 统一用组件 ID 做校验：只有
detail.id === componentId才执行回调 - 不同组件即使派发同名事件（如
'close'），也不会互相触发 - 无需为每个组件单独命名事件类型，降低命名冲突和维护成本
