currentTarget本身不保持事件不变性，而是因监听器绑定在稳定父容器（如table或tbody）上才始终指向该元素；批量更新时须确保监听器单次绑定、新元素结构可识别、不重复绑定。
在表格批量更新场景中，currentTarget 本身**不用于保持包裹层事件的不变性**——它只是事件对象的一个只读属性，指向当前绑定事件监听器的那个元素。真正起作用的是**事件委托 + 正确绑定监听器位置 + 避免重复绑定/移除**。关键在于：把事件监听器稳定地挂在不会被批量更新替换的父容器上（比如 <table> 或 <code><tbody>），而不是挂到会被动态删掉的行（<code><tr>）或单元格（<code><td>）上。<h3>为什么 currentTarget 看起来“有用”？</h3>
<p>当你用事件委托时，比如：</p>
<pre class="brush:php;toolbar:false;">table.addEventListener('click', function(e) {
if (e.target.matches('.btn-update')) {
console.log(e.currentTarget); // 始终是 table 元素
}
});</pre>
<p>这里的 <code>e.currentTarget 永远是 table，因为监听器就绑在它身上。即使你清空并重绘了整个 <tbody>，只要 <code>table 本身没被替换，监听器就一直有效，currentTarget 就始终稳定。这不是它“保持”了什么，而是你把它放在了一个稳定的锚点上。
批量更新时必须守住的三个锚点
-
监听器只绑定一次，且挂载在不会被 innerHTML 或 replaceChildren 清除的容器上 —— 推荐
<table>、<code><tbody id="data-body"> 或外层 <code><div class="table-wrapper">；避免绑在每次都会被 <code>row.remove()或innerHTML = ''干掉的节点上。 -
所有动态插入的新行/按钮，必须使用相同的 class、data 属性或结构特征 —— 比如统一加
data-action="update"，这样委托逻辑才能持续识别新元素，无需重新绑定。 - 不要在更新后手动调用 addEventListener 给新 DOM 节点 —— 这会导致监听器堆积、内存泄漏，也破坏“不变性”。委托模式下，新元素天然响应，前提是结构可识别。
一个安全的批量更新 + 委托示例
假设你用 JS 批量渲染 100 行数据：
// ✅ 正确：监听器只绑定一次，在稳定容器上
const tbody = document.getElementById('data-body');
tbody.addEventListener('click', function(e) {
const btn = e.target.closest('[data-action="update"]');
if (btn) {
const row = btn.closest('tr');
const id = row?.dataset.id;
console.log('更新第', id, '行 —— currentTarget 始终是 tbody');
}
});
// ✅ 批量更新：只替换 tbody 内容，不碰 tbody 自身
function renderRows(data) {
tbody.innerHTML = data.map(item => `
<tr data-id="${item.id}">
<td>${item.name}</td>
<td><button data-action="update">更新</button></td>
</tr>
`).join('');
}
此时无论你调用 renderRows() 多少次，e.currentTarget 始终是那个 tbody 元素，事件行为完全一致。
容易踩的坑
- 把监听器绑在
document或window上虽“稳”，但不够精准，可能误触发，也不利于模块隔离。 - 用
querySelectorAll('.btn').forEach(...addEventListener)批量绑定 —— 每次更新都得先removeEventListener再重绑，极易出错且低效。 - 在 Vue/React 等框架中强行操作 DOM 批量更新，却忽略框架自身的事件机制 —— 应优先用
@click或onClick，由框架管理委托和更新生命周期。
