表格组件中用事件委托，核心是将事件监听器集中绑定到，通过事件冒泡和e.target.matches精准识别目标字段，用closest('tr')定位行并实时计算单行总价与订单总和，适配动态增删行和虚拟滚动，注意input冒泡、父容器选择及防抖优化。
在表格组件中用事件委托，核心是把原本要绑在每个输入框或按钮上的事件监听器，集中收口到表格（<table> 或 <code><tbody>）这一层，靠<a style="color:#f60; text-decoration:underline;" title="事件冒泡" href="https://m.php.cn/zt/16487.html" target="_blank">事件冒泡</a> + 目标判断来响应操作。这样做既省内存，又支持动态增删行，还能让实时计算逻辑更干净。
<h3>只监听一次，覆盖所有行操作</h3>
<p>不要给每行的单价、数量、删除按钮分别加 <code>input 或 click 监听器。直接在 <tbody> 上监听：
<ul>
<li>用 <code>input 事件捕获单价/数量变化，避免频繁触发；
click 事件处理删除、编辑等操作；e.target.matches('input[data-field="price"], input[data-field="qty"]') 精准识别目标字段；e.target.closest('tr') 快速定位所在行，方便读取该行其他单元格数据。实时计算单行总价与订单总和
当用户修改某一行的单价或数量时，立即更新该行的“总计”单元格，并重新汇总所有可见行的总价作为“订单总额”：
- 从触发元素出发，用
closest('tr')拿到当前行，再查同行的input[data-field="price"]和input[data-field="qty"]值； - 校验输入是否为有效数字，负值或空值可设为 0；
- 算出单行总价后写入对应
.total单元格； - 遍历
tbody.querySelectorAll('tr')累加所有.total的数值，更新底部合计栏——注意跳过空行或无效行。
适配动态插入与虚拟滚动场景
如果表格支持新增行、撤销、或启用了虚拟滚动（只渲染可视区域），事件委托的优势会更明显：
- 新插入的行无需额外绑定事件，只要结构一致（如含相同
data-field属性），原监听器自动生效； - 虚拟滚动中，
<tbody> 是稳定容器，即使内部 <code><div> 内容频繁替换，监听器仍长期有效； <li>避免在 <code>renderVisibleItems()中反复调用addEventListener，防止监听器堆积或漏绑。 -
input事件不冒泡？错——它支持冒泡，但change在某些场景下可能延迟触发，优先选input； - 避免委托到
document或body：层级太深会增加判断开销，应选最近的稳定父容器（如<tbody> 或带 id 的 <code><div class="table-wrapper">）； <li>对高频操作（如快速连输数字），可用防抖控制计算频率，但单次输入后立刻更新单行总价仍建议同步执行；</li> <li>若表格含复选框、下拉选择等控件，统一用 <code>e.target.type或dataset区分类型，保持分支逻辑清晰。
注意边界情况和性能细节
事件委托不是万能的，几个关键点要留心：
