事件委托实现长表格增删改查的核心是结构清晰、代理集中、行为解耦：绑定到稳定父容器，用data-id标识行，统一调度器处理操作，动态注入ui，兜底动态内容与边界场景。
直接用事件委托实现长表格的增删改查，核心就三点：结构清晰、代理集中、行为解耦。不需要给每行按钮单独绑事件，也不用反复创建销毁 DOM 元素，性能和可维护性都能稳住。
表格结构要“轻”且语义明确
表头固定、内容区滚动是工业级表格的基本要求。用 <table> 保持语义，但 tbody 需要独立容器（比如加个 <code>div.table-body 包裹），避免整个 table 重绘影响性能。操作列统一放在最后一列，不写死按钮 HTML，只留占位标识：
- 每行末尾单元格写
<span class="op-col" data-id="123"></span> - ID 存在 data 属性里，不依赖 DOM 位置或索引，避免插入/排序后错位
- 所有按钮样式、文字、图标全靠 JS 动态注入或 CSS 伪元素生成，减少初始 HTML 体积
事件委托必须绑定到稳定父容器
不要绑定在 tbody 或 table 上——它们可能被整段替换；推荐绑定在包裹表格的 div.table-wrapper 上。监听 click 时，用 e.target.closest('.op-col') 精准捕获操作区域：
- 点击“编辑”时，根据 data-id 找到对应行，把该行单元格切换为 input / select 编辑态
- 点击“删除”时，阻止冒泡，调用 removeRow(id)，再触发数据层更新（如 Vue 的 splice 或 React 的 filter）
- 支持右键菜单、空格键激活、Enter 提交等辅助交互，都走同一委托入口，逻辑不散落
增删改查动作全部走统一调度器
把“增”“删”“改”“查”抽象成方法名 + 参数对象，由一个 handleAction(type, payload) 统一处理：
- 增：传入默认字段值，
insertRow({name: '', status: 'active'})，自动插入到 tbody 末尾并聚焦首字段 - 删：payload 是 id 数组，支持单删/批量删，删前弹确认框，删后触发动画收起行（CSS transition + height + opacity）
- 改：编辑完成时（blur 或 Enter），校验必填项，再调用
updateRow(id, newData)，只更新 model，视图自动响应 - 查：不是指搜索框，而是“查某行当前状态”，比如点击某行操作列的“详情”按钮，直接读取该行 data-id 对应的完整数据对象
边界情况必须提前兜底
长表格常遇到滚动加载、虚拟滚动、跨页选中等场景，事件委托容易漏掉动态插入的行。解决办法很实在：
- 所有新增行，必须确保其操作列包含
class="op-col"和data-id，不依赖 JS 插入时机 - 如果用了虚拟滚动（如 react-window），就把委托挂到滚动容器上，并在每次 renderRows 后确保 op-col 可被命中
- 禁用鼠标中键点击、防止误触；对连续点击做防抖（尤其删除）；键盘 Tab 导航需自然落入操作列焦点环
