事件委托通过绑定在稳定容器（如document.body）上，利用事件冒泡和data-action属性统一处理动态路由下的交互，仅需一次注册，避免重复绑定与生命周期依赖。
事件委托在单页应用中统一管理动态路由视图的事件，核心是把事件监听绑定在**不会被销毁的稳定容器**（如 #app 或 document.body）上，利用事件冒泡 + event.target 的匹配逻辑，动态响应不同路由下生成的元素——无需每次切换路由都重绑/解绑事件，也不依赖组件生命周期手动维护。
选对委托根节点：用全局容器代替局部视图
SPA 中路由切换时，视图 DOM 通常被完全替换（如 Vue 的 <router-view>、React 的 <Outlet>），若把事件监听器挂载在视图内部节点上，会随 DOM 销毁而丢失。应统一挂载到：
-
document.body（最常用，始终存在，兼容性好） - 应用根容器（如
document.getElementById('app')），前提是它不随路由卸载 - 避免用
document（可能触发过早，且需额外判断是否在当前视图内）
用 data 属性标记可交互元素，解耦路由与事件逻辑
不同路由下的按钮、列表项功能各异，但行为模式相似（如“删除”“编辑”“跳转”）。可在模板中统一添加语义化 data- 属性，例如：
<button data-action="delete" data-id="123">删除</button> <a href="#" data-action="navigate" data-to="/user/456">查看用户</a>
委托监听时只关注 data-action，再根据值分发处理，无需为每个路由写独立事件绑定代码。
立即学习“Java免费学习笔记（深入）”；
在入口或路由就绪后一次性注册委托监听
推荐在 SPA 初始化完成、路由系统启动后，**只执行一次**绑定。例如：
// 全局事件委托注册（仅一次）
document.body.addEventListener('click', function (e) {
const target = e.target;
// 匹配带 data-action 的可点击元素
if (target.matches('[data-action]')) {
const action = target.dataset.action;
const id = target.dataset.id;
const to = target.dataset.to;
switch (action) {
case 'delete':
handleDelete(id);
break;
case 'navigate':
router.push(to); // 如使用 Vue Router 或 React Router
break;
case 'edit':
openEditModal(target.closest('[data-item-id]')?.dataset.itemId);
break;
}
}
});
这样无论后续渲染多少个路由视图，只要元素带对应 data-action，就能被统一捕获和处理。
注意事件代理的边界与安全
委托虽方便，但需主动控制作用域和副作用：
- 用
target.closest(selector)向上查找最近的业务容器（如data-route="user-list"），可限制仅响应当前路由下的操作，避免跨视图误触发 - 对表单提交、链接跳转等默认行为，记得调用
e.preventDefault() - 避免在委托回调中直接操作已卸载组件的响应式数据（如 Vue 的
ref、React 的setState），可加存活检查或用事件总线解耦
不复杂但容易忽略：委托不是万能的，它解决的是“谁来监听”，真正的业务逻辑仍需按需组织；关键是让 DOM 结构和交互语义保持一致，再用一层轻量的分发机制兜住所有动态场景。
