核心解法是用bem规范类名提升事件委托精准度：①用唯一block名（如.order-summary）杜绝跨块误匹配；②状态类统一用is-前缀且不叠加；③禁用层级选择器，改用closest('.modal-content')等直接定位；④配合ts封装类型安全判断函数。
在大厂级复杂业务线中，事件委托依赖 element.matches() 做精准条件判断，一旦类名不规范，极易因语义模糊、层级混淆或动态干扰导致“误伤”——比如点击一个子模块按钮，却触发了父模块的逻辑，或状态类名被复用引发多处响应。核心解法不是少用委托，而是让类名本身成为可靠、自解释、抗干扰的判断依据。
用 BEM 明确块边界，杜绝跨块误匹配
BEM 强制每个 UI 单元有唯一 Block 名（如 .order-summary、.payment-method），所有子元素和状态类都严格归属其下。这样在委托处理中，event.target.closest('.order-summary') 能稳稳锚定到本模块，不会因为同名 .header 或 .content 出现在其他 Block 里而错抓。
- ✅ 正确：只匹配完整 Block 名 + 明确 Element/Modifier，如
el.matches('.order-summary__submit.is-disabled') - ❌ 错误：用泛化类名做判断，如
el.matches('.btn.disabled')—— 全局可能有几十个.btn，.disabled更是跨模块复用高频词
状态类统一用 is- 前缀，且仅用于运行时判断
把布尔状态（加载中、禁用、展开）全部收口到 is- 开头的类名，和样式变体（--small、--dark）彻底分离。这样 matches('.xxx__trigger.is-loading') 的意图一目了然：这是 JS 动态控制的状态，不是 CSS 主题配置。
- 避免混用：不写
.button--loading（易被当成静态主题），也不写.loading（语义丢失归属） - 确保唯一性：一个元素上
is-类名只表达一种状态，不叠加多个（如不用is-loading is-error同时存在，改用is-error覆盖is-loading）
禁止依赖 DOM 层级关系做 matches 判断
大厂项目常有多层嵌套容器（如弹窗里套表单，表单里套列表），若写 el.parentElement.matches('.modal .form')，一旦结构微调或组件复用，匹配就失效。BEM 要求“一个元素一个语义类”，直接给关键节点赋予独立 Block 名。
- 给弹窗内容区加类
.modal-content，而不是靠.modal > .content - 委托处理器里统一用
target.closest('.modal-content')，不查父级、不数层级 - 所有可交互区域（按钮、开关、输入框）都带明确 Block+Element 类，如
.user-profile__avatar、.notification-list__item
配合 TypeScript 封装类型安全的判断函数
把字符串匹配逻辑收口成具名函数，既防拼写错误，也屏蔽混淆风险（如构建后类名被压缩）：
- 定义常量：
const IS_LOADING = 'is-loading' as const; - 封装函数：
function isTriggerLoading(el: Element) { return el.matches('.button__trigger.' + IS_LOADING); } - 业务层直接调用：
if (isTriggerLoading(event.target)) { ... }—— IDE 可跳转、重命名自动同步、类型检查兜底
