事件委托需与虚拟滚动配合使用才能解决表格卡顿问题：前者优化事件绑定效率，后者减少DOM数量；应选最近公共父节点委托、用closest()精准捕获目标、分层识别操作类型，并避免监听document或body。
事件委托本身不负责渲染，它只管“怎么高效响应点击”，而表格大数据渲染卡顿的根源是 DOM 过多。所以真正有效的做法是：用事件委托解决事件绑定爆炸问题，再搭配虚拟滚动解决 DOM 过载问题——两者必须配合使用，缺一不可。
选对委托容器，避免监听范围过大
不要把 click 监听器直接挂到 document 或 body 上。那样会捕获所有页面点击，每次都要做冗余判断，反而拖慢响应速度。应按操作语义选择最近公共父节点：
- 整行操作（如选中、查看详情）→ 委托给 <tbody>
- 列头交互（排序、筛选）→ 委托给 <thead> 或整个 <table>
- 操作按钮（编辑/删除）→ 委托给带 class 的单元格容器，例如 <td class="action-cell">
用 closest() 精准定位目标，避开文本节点陷阱
直接读 e.target 很容易拿到文本节点、span 或图标子元素，导致 matches() 判断失败。推荐统一用 closest() 向上查找语义化目标：
- e.target.closest('tr') → 获取被点击的行（不管点在 td、文字还是内嵌标签上）
- e.target.closest('[data-action]') → 捕获所有带行为标识的按钮，无需为每个按钮单独绑定
- 配合 dataset 存 ID 或类型，比如 <button data-action="delete" data-id="102">，避免运行时查 DOM
分层识别操作类型，避免 if 嵌套过深
一张大表常有多种交互，应在单个监听器里按优先级分层判断：
立即学习“Java免费学习笔记（深入）”；
- 先检查是否点在 th.sortable → 触发列排序
- 再看是否落在 td[data-field="status"] → 处理状态列点击
- 最后匹配 [data-action] → 分发按钮逻辑（删除、编辑等）
- 对 <a> 标签调用 e.preventDefault() 防跳转；一般不主动 stopPropagation()，保留冒泡便于上层统一处理
必须搭配虚拟滚动，否则委托也救不了
事件委托解决了监听器数量问题，但如果表格仍渲染了上万行 DOM，页面照样卡顿甚至崩溃。虚拟滚动才是治本之策：
- 只渲染可视区域 + 少量缓冲区（通常 20–30 行），其余用占位 div 占据空间
- 滚动时动态更新内容，通过 transform: translateY() 定位真实数据位置
- 事件委托与虚拟滚动天然兼容：新插入的行无需重新绑定，点击依然有效
