事件委托在虚拟滚动中不卡顿的关键是把监听做轻、做稳、做准：绑定到稳定容器，用closest()快速精准定位目标，解耦副作用并延迟执行，避免重渲染打断委托链。
事件委托在虚拟滚动中不卡顿的关键，不是“加更多监听”，而是把监听做轻、做稳、做准——绑定位置对、查找逻辑快、副作用不干扰渲染。
绑定到稳定容器，别碰动态节点
虚拟滚动里，<li>、.item 这类元素随滚动频繁创建销毁，直接绑 @click 或用 querySelectorAll('.item').forEach(...) 会不断重绑、漏绑、报错。必须把监听器挂载在不会销毁的外层容器上：
- Vue 项目：监听
<var-list></var-list>、<div class="virtual-container"> 等父级元素的原生 <code>click事件 - 原生 JS：给
document.getElementById('scroll-container')绑addEventListener('click', handler) - 避免在
v-for或map()循环内写onclick=...或el.addEventListener - 为每个可点击项添加语义化 data 属性，例如
data-row-id="1024"或data-action="edit" - 处理器中直接写
const itemEl = event.target.closest('[data-row-id]'); - 加空值防护：
if (!itemEl) return;，防止点到滚动条、空白区或占位 div 时出错 - 避免写
event.target.closest('.list-item .content .btn')这类深度选择器，结构一变就失效 - 把副作用延迟执行：用
nextTick（Vue）或requestIdleCallback/setTimeout(fn, 0)（原生）包裹状态更新 - 高亮、弹窗等 UI 反馈，尽量用独立浮层或 class 切换，不要强制重绘整个列表区域
- API 请求这类异步操作本身不影响 DOM，可同步触发，但注意取消重复请求（如防抖或 AbortController）
- 节流点击处理：对同一元素短时间内多次点击只响应第一次（用时间戳或 flag 控制）
- 忽略非左键点击：
if (event.button !== 0) return; - 避免在 handler 里做复杂计算或遍历；ID 提取后直接传给业务函数，保持委托层干净
- 必要时用
Passive: true声明 scroll 监听器（不影响 click 委托，但提升滚动流畅度）
用 closest() 快速定位，不依赖 DOM 深度
目标元素可能刚被卸载，event.target 可能指向文本节点、图标或空白区域。靠 event.target.parentNode 多层向上找容易出错且慢。推荐统一用 closest() 一次命中：
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
解耦点击逻辑，防重渲染打断委托链
点击后如果立刻修改响应式状态（比如 selectedId = ...），可能触发虚拟列表重新计算可见范围，导致刚委托成功的 DOM 节点瞬间被销毁，后续取 dataset 或操作元素时报错。
补充：高频场景可进一步减压
如果列表每秒滚动多次+频繁点击（如拖拽排序、批量勾选），还可加一层轻量控制：
