写事件处理函数时，我见过太多人在 `click` 回调里随手用 `e.target` 去改样式或取数据，结果在嵌套结构里翻车。比如一个卡片列表，点击内部的删除按钮，却把整个卡片的背景色改了；或者用事件委托监听 `ul`，点击 `li` 里的 `span` 时拿到的 `target` 是 `span`，而你需要的是那个 `li`。这类问题的根源就是没分清 `e.target` 和 `e.currentTarget`。`target` 始终指向触发事件的原始元素，也就是你实际点中的那个节点；`currentTarget` 则指向当前绑定监听器的那个元素。在事件冒泡过程中，`target` 不会变，但 `currentTarget` 会随着事件流经过的每个监听元素而改变。这篇文章从 DOM 事件模型讲起，结合事件委托、动态元素、React 合成事件等场景，把这两个属性的行为差异和常见误用一次说清楚。

## 从一次点击说起

假设有下面这样一段结构：

```html
<div class="card" id="card">
 <h3>标题</h3>
 <button class="delete">删除</button>
</div>
```

给 `.card` 绑一个点击事件：

```js
const card = document.getElementById('card');
card.addEventListener('click', function (e) {
 console.log('target:', e.target);
 console.log('currentTarget:', e.currentTarget);
});
```

点击按钮时，控制台输出：

- `target` 是 `<button class="delete">删除</button>`
- `currentTarget` 是 `<div class="card" id="card">...</div>`

点击标题时，`target` 变成 `<h3>`，`currentTarget` 还是那个 `div`。点击卡片空白处，`target` 和 `currentTarget` 才相同，都是 `div`。这个差异就是所有坑的起点。

## 为什么 currentTarget 在异步里会变成 null

很多人写过这样的代码然后发现报错：

```js
button.addEventListener('click', function (e) {
 setTimeout(() => {
 console.log(e.currentTarget); // null
 }, 100);
});
```

原因是 `currentTarget` 只在事件处理函数的执行期间有值。事件派发结束后，浏览器会把 `currentTarget` 重置为 `null`。而 `target` 是真实 DOM 节点引用，不会因为事件结束而失效。所以如果你需要在异步回调里访问绑定元素，要么提前把 `e.currentTarget` 存进变量，要么直接用 `this`（非箭头函数下）或者闭包引用外部元素。

```js
button.addEventListener('click', function (e) {
 const btn = e.currentTarget;
 setTimeout(() => {
 btn.disabled = true;
 }, 500);
});
```

## 事件委托里该用哪个

事件委托是 `currentTarget` 和 `target` 配合最典型的地方。给父容器绑定一个监听器，通过 `target` 判断实际点的是哪个子元素：

```js
const list = document.getElementById('list');
list.addEventListener('click', function (e) {
 const item = e.target.closest('.item');
 if (!item) return;
 if (e.target.matches('.remove-btn')) {
 item.remove();
 }
});
```

这里 `e.target` 可能是 `.remove-btn`，也可能是按钮里的图标 ``，所以用 `closest` 往上找最近的 `.item` 才稳妥。`e.currentTarget` 在这里始终是 `#list`，它代表委托的容器，不是被点击的业务元素。如果误把 `e.currentTarget` 当成被点击项，删除逻辑就会把整个列表删掉。

## React 里的合成事件差异

React 17 之前，合成事件被挂载到 `document` 上，`e.currentTarget` 在事件回调里依然指向绑定元素，但 React 内部对事件对象做了池化，异步访问会出问题。React 17 之后事件挂载到 root 容器，池化也移除了，但 `currentTarget` 的语义没变：它指向当前正在执行回调的那个元素。

```jsx
function App() {
 const handleClick = (e) => {
 console.log(e.target); // 实际点击的 DOM
 console.log(e.currentTarget); // 绑定 onClick 的那个元素
 };

 return (
 <div onClick={handleClick}>
 <button>点我</button>
 </div>
 );
}
```

在 React 中同样不要依赖异步里的 `e.currentTarget`，它在事件回调结束后也会被置空。需要的话先解构：

```jsx
const handleClick = (e) => {
 const el = e.currentTarget;
 requestAnimationFrame(() => {
 el.classList.add('active');
 });
};
```

## 一个容易忽略的坑：disabled 按钮不触发事件

当按钮被 `disabled` 时，点击它不会触发父元素的 click 事件，因为 disabled 表单控件不派发鼠标事件。这时候用事件委托去捕获删除按钮会失效。常见做法是给按钮套一层 ``，或者用 `pointer-events` 配合 `aria-disabled` 模拟禁用状态。这和 `target`/`currentTarget` 本身无关，但经常一起出现，排查时容易绕远路。

## 该用哪个的判断标准

如果你关心的是“用户到底点中了什么”，用 `e.target`，配合 `closest`、`matches` 做过滤。如果你关心的是“哪个元素上的监听器被触发了”，用 `e.currentTarget`。在事件委托的场景里，`currentTarget` 是委托容器，`target` 是实际触发点。在直接绑定的场景里，二者通常相同，除非内部还有子元素。

写业务代码时，养成一个习惯：在回调开头先把需要的引用解构出来。

```js
function onClick(e) {
 const { target, currentTarget } = e;
 // 后续异步逻辑 safely 使用 target / currentTarget
}
```

这样既避免了异步置空的问题，也让代码意图更清晰——谁是被点的，谁是绑事件的。

 推荐查看天气：https://www.0dtq.com/linfenyicheng/15tian.html
 推荐查看天气：https://www.0dtq.com/linfenyicheng/40tian.html
 推荐查看天气：https://www.0dtq.com/xiangfen/
 推荐查看天气：https://www.0dtq.com/xiangfen/zuotian.html
 推荐查看天气：https://www.0dtq.com/xiangfen/7tian.html
 推荐查看天气：https://www.0dtq.com/xiangfen/10tian.html
 推荐查看天气：https://www.0dtq.com/xiangfen/15tian.html
 推荐查看天气：https://www.0dtq.com/xiangfen/40tian.html
 推荐查看天气：https://www.0dtq.com/hongdong/
 推荐查看天气：https://www.0dtq.com/hongdong/zuotian.html
 推荐查看天气：https://www.0dtq.com/hongdong/7tian.html
 推荐查看天气：https://www.0dtq.com/hongdong/10tian.html
 推荐查看天气：https://www.0dtq.com/hongdong/15tian.html
 推荐查看天气：https://www.0dtq.com/hongdong/40tian.html
 推荐查看天气：https://www.0dtq.com/guxian/
 推荐查看天气：https://www.0dtq.com/guxian/zuotian.html
 推荐查看天气：https://www.0dtq.com/guxian/7tian.html
 推荐查看天气：https://www.0dtq.com/guxian/10tian.html
 推荐查看天气：https://www.0dtq.com/guxian/15tian.html
 推荐查看天气：https://www.0dtq.com/guxian/40tian.html
 推荐查看天气：https://www.0dtq.com/anze/
 推荐查看天气：https://www.0dtq.com/anze/zuotian.html
 推荐查看天气：https://www.0dtq.com/anze/7tian.html
 推荐查看天气：https://www.0dtq.com/anze/10tian.html
 推荐查看天气：https://www.0dtq.com/anze/15tian.html
 推荐查看天气：https://www.0dtq.com/anze/40tian.html
 推荐查看天气：https://www.0dtq.com/linfenfushan/
 推荐查看天气：https://www.0dtq.com/linfenfushan/zuotian.html
 推荐查看天气：https://www.0dtq.com/linfenfushan/7tian.html
 推荐查看天气：https://www.0dtq.com/linfenfushan/10tian.html
 推荐查看天气：https://www.0dtq.com/linfenfushan/15tian.html
 推荐查看天气：https://www.0dtq.com/linfenfushan/40tian.html
 推荐查看天气：https://www.0dtq.com/linfenjixian/
 推荐查看天气：https://www.0dtq.com/linfenjixian/zuotian.html
 推荐查看天气：https://www.0dtq.com/linfenjixian/7tian.html
 推荐查看天气：https://www.0dtq.com/linfenjixian/10tian.html
 推荐查看天气：https://www.0dtq.com/linfenjixian/15tian.html
 推荐查看天气：https://www.0dtq.com/linfenjixian/40tian.html
 推荐查看天气：https://www.0dtq.com/xiangning/
 推荐查看天气：https://www.0dtq.com/xiangning/zuotian.html
 推荐查看天气：https://www.0dtq.com/xiangning/7tian.html
 推荐查看天气：https://www.0dtq.com/xiangning/10tian.html
 推荐查看天气：https://www.0dtq.com/xiangning/15tian.html
 推荐查看天气：https://www.0dtq.com/xiangning/40tian.html
 推荐查看天气：https://www.0dtq.com/daning/
 推荐查看天气：https://www.0dtq.com/daning/zuotian.html
 推荐查看天气：https://www.0dtq.com/daning/7tian.html
 推荐查看天气：https://www.0dtq.com/daning/10tian.html
 推荐查看天气：https://www.0dtq.com/daning/15tian.html
 推荐查看天气：https://www.0dtq.com/daning/40tian.html
 推荐查看天气：https://www.0dtq.com/linfenxixian/
 推荐查看天气：https://www.0dtq.com/linfenxixian/zuotian.html
 推荐查看天气：https://www.0dtq.com/linfenxixian/7tian.html
 推荐查看天气：https://www.0dtq.com/linfenxixian/10tian.html
 推荐查看天气：https://www.0dtq.com/linfenxixian/15tian.html
 推荐查看天气：https://www.0dtq.com/linfenxixian/40tian.html
 推荐查看天气：https://www.0dtq.com/yonghe/
 推荐查看天气：https://www.0dtq.com/yonghe/zuotian.html
 推荐查看天气：https://www.0dtq.com/yonghe/7tian.html
 推荐查看天气：https://www.0dtq.com/yonghe/10tian.html
 推荐查看天气：https://www.0dtq.com/yonghe/15tian.html
 推荐查看天气：https://www.0dtq.com/yonghe/40tian.html
 推荐查看天气：https://www.0dtq.com/puxian/
 推荐查看天气：https://www.0dtq.com/puxian/zuotian.html
 推荐查看天气：https://www.0dtq.com/puxian/7tian.html
 推荐查看天气：https://www.0dtq.com/puxian/10tian.html
 推荐查看天气：https://www.0dtq.com/puxian/15tian.html
 推荐查看天气：https://www.0dtq.com/puxian/40tian.html
 推荐查看天气：https://www.0dtq.com/fenxi/
 推荐查看天气：https://www.0dtq.com/fenxi/zuotian.html
 推荐查看天气：https://www.0dtq.com/fenxi/7tian.html
 推荐查看天气：https://www.0dtq.com/fenxi/10tian.html
 推荐查看天气：https://www.0dtq.com/fenxi/15tian.html
 推荐查看天气：https://www.0dtq.com/fenxi/40tian.html
 推荐查看天气：https://www.0dtq.com/houma/
 推荐查看天气：https://www.0dtq.com/houma/zuotian.html
 推荐查看天气：https://www.0dtq.com/houma/7tian.html
 推荐查看天气：https://www.0dtq.com/houma/10tian.html
 推荐查看天气：https://www.0dtq.com/houma/15tian.html
 推荐查看天气：https://www.0dtq.com/houma/40tian.html
 推荐查看天气：https://www.0dtq.com/huozhou/
 推荐查看天气：https://www.0dtq.com/huozhou/zuotian.html
 推荐查看天气：https://www.0dtq.com/huozhou/7tian.html
 推荐查看天气：https://www.0dtq.com/huozhou/10tian.html
 推荐查看天气：https://www.0dtq.com/huozhou/15tian.html
 推荐查看天气：https://www.0dtq.com/huozhou/40tian.html
 推荐查看天气：https://www.0dtq.com/lvliang/
 推荐查看天气：https://www.0dtq.com/lvliang/zuotian.html
 推荐查看天气：https://www.0dtq.com/lvliang/7tian.html
 推荐查看天气：https://www.0dtq.com/lvliang/10tian.html
 推荐查看天气：https://www.0dtq.com/lvliang/15tian.html
 推荐查看天气：https://www.0dtq.com/lvliang/40tian.html
 推荐查看天气：https://www.0dtq.com/lishi/
 推荐查看天气：https://www.0dtq.com/lishi/zuotian.html
 推荐查看天气：https://www.0dtq.com/lishi/7tian.html
 推荐查看天气：https://www.0dtq.com/lishi/10tian.html
 推荐查看天气：https://www.0dtq.com/lishi/15tian.html
 推荐查看天气：https://www.0dtq.com/lishi/40tian.html
 推荐查看天气：https://www.0dtq.com/wenshui/
 推荐查看天气：https://www.0dtq.com/wenshui/zuotian.html
 推荐查看天气：https://www.0dtq.com/wenshui/7tian.html
 推荐查看天气：https://www.0dtq.com/wenshui/10tian.html
 推荐查看天气：https://www.0dtq.com/wenshui/15tian.html
 推荐查看天气：https://www.0dtq.com/wenshui/40tian.html
 推荐查看天气：https://www.0dtq.com/lvliangjiaocheng/
 推荐查看天气：https://www.0dtq.com/lvliangjiaocheng/zuotian.html
 推荐查看天气：https://www.0dtq.com/lvliangjiaocheng/7tian.html
 推荐查看天气：https://www.0dtq.com/lvliangjiaocheng/10tian.html
 推荐查看天气：https://www.0dtq.com/lvliangjiaocheng/15tian.html
 推荐查看天气：https://www.0dtq.com/lvliangjiaocheng/40tian.html
 推荐查看天气：https://www.0dtq.com/xingxian/
 推荐查看天气：https://www.0dtq.com/xingxian/zuotian.html
 推荐查看天气：https://www.0dtq.com/xingxian/7tian.html
 推荐查看天气：https://www.0dtq.com/xingxian/10tian.html
 推荐查看天气：https://www.0dtq.com/xingxian/15tian.html
 推荐查看天气：https://www.0dtq.com/xingxian/40tian.html
 推荐查看天气：https://www.0dtq.com/linxian/
 推荐查看天气：https://www.0dtq.com/linxian/zuotian.html
 推荐查看天气：https://www.0dtq.com/linxian/7tian.html
 推荐查看天气：https://www.0dtq.com/linxian/10tian.html
 推荐查看天气：https://www.0dtq.com/linxian/15tian.html
 推荐查看天气：https://www.0dtq.com/linxian/40tian.html
 推荐查看天气：https://www.0dtq.com/liulin/
 推荐查看天气：https://www.0dtq.com/liulin/zuotian.html
 推荐查看天气：https://www.0dtq.com/liulin/7tian.html
 推荐查看天气：https://www.0dtq.com/liulin/10tian.html
 推荐查看天气：https://www.0dtq.com/liulin/15tian.html
 推荐查看天气：https://www.0dtq.com/liulin/40tian.html
 推荐查看天气：https://www.0dtq.com/shilou/
 推荐查看天气：https://www.0dtq.com/shilou/zuotian.html
 推荐查看天气：https://www.0dtq.com/shilou/7tian.html
 推荐查看天气：https://www.0dtq.com/shilou/10tian.html
 推荐查看天气：https://www.0dtq.com/shilou/15tian.html
 推荐查看天气：https://www.0dtq.com/shilou/40tian.html
 推荐查看天气：https://www.0dtq.com/lanxian/
 推荐查看天气：https://www.0dtq.com/lanxian/zuotian.html
 推荐查看天气：https://www.0dtq.com/lanxian/7tian.html
 推荐查看天气：https://www.0dtq.com/lanxian/10tian.html
 推荐查看天气：https://www.0dtq.com/lanxian/15tian.html
 推荐查看天气：https://www.0dtq.com/lanxian/40tian.html
 推荐查看天气：https://www.0dtq.com/fangshan/
 推荐查看天气：https://www.0dtq.com/fangshan/zuotian.html
 推荐查看天气：https://www.0dtq.com/fangshan/7tian.html
 推荐查看天气：https://www.0dtq.com/fangshan/10tian.html
 推荐查看天气：https://www.0dtq.com/fangshan/15tian.html
 推荐查看天气：https://www.0dtq.com/fangshan/40tian.html
 推荐查看天气：https://www.0dtq.com/zhongyang/
 推荐查看天气：https://www.0dtq.com/zhongyang/zuotian.html
 推荐查看天气：https://www.0dtq.com/zhongyang/7tian.html
 推荐查看天气：https://www.0dtq.com/zhongyang/10tian.html
 推荐查看天气：https://www.0dtq.com/zhongyang/15tian.html
 推荐查看天气：https://www.0dtq.com/zhongyang/40tian.html
 推荐查看天气：https://www.0dtq.com/jiaokou/
 推荐查看天气：https://www.0dtq.com/jiaokou/zuotian.html
 推荐查看天气：https://www.0dtq.com/jiaokou/7tian.html
 推荐查看天气：https://www.0dtq.com/jiaokou/10tian.html
 推荐查看天气：https://www.0dtq.com/jiaokou/15tian.html
 推荐查看天气：https://www.0dtq.com/jiaokou/40tian.html
 推荐查看天气：https://www.0dtq.com/xiaoyi/
 推荐查看天气：https://www.0dtq.com/xiaoyi/zuotian.html
 推荐查看天气：https://www.0dtq.com/xiaoyi/7tian.html
 推荐查看天气：https://www.0dtq.com/xiaoyi/10tian.html
 推荐查看天气：https://www.0dtq.com/xiaoyi/15tian.html
 推荐查看天气：https://www.0dtq.com/xiaoyi/40tian.html
 推荐查看天气：https://www.0dtq.com/fenyang/
 推荐查看天气：https://www.0dtq.com/fenyang/zuotian.html
 推荐查看天气：https://www.0dtq.com/fenyang/7tian.html
 推荐查看天气：https://www.0dtq.com/fenyang/10tian.html
 推荐查看天气：https://www.0dtq.com/fenyang/15tian.html
 推荐查看天气：https://www.0dtq.com/fenyang/40tian.html
 推荐查看天气：https://www.0dtq.com/huhehaote/
 推荐查看天气：https://www.0dtq.com/huhehaote/zuotian.html
 推荐查看天气：https://www.0dtq.com/huhehaote/7tian.html
 推荐查看天气：https://www.0dtq.com/huhehaote/10tian.html
 推荐查看天气：https://www.0dtq.com/huhehaote/15tian.html
 推荐查看天气：https://www.0dtq.com/huhehaote/40tian.html
 推荐查看天气：https://www.0dtq.com/yuquan/
 推荐查看天气：https://www.0dtq.com/yuquan/zuotian.html
 推荐查看天气：https://www.0dtq.com/yuquan/7tian.html
 推荐查看天气：https://www.0dtq.com/yuquan/10tian.html
 推荐查看天气：https://www.0dtq.com/yuquan/15tian.html
 推荐查看天气：https://www.0dtq.com/yuquan/40tian.html
 推荐查看天气：https://www.0dtq.com/saihan/
 推荐查看天气：https://www.0dtq.com/saihan/zuotian.html
 推荐查看天气：https://www.0dtq.com/saihan/7tian.html
 推荐查看天气：https://www.0dtq.com/saihan/10tian.html
 推荐查看天气：https://www.0dtq.com/saihan/15tian.html
 推荐查看天气：https://www.0dtq.com/saihan/40tian.html
 推荐查看天气：https://www.0dtq.com/tumotezuoqi/
 推荐查看天气：https://www.0dtq.com/tumotezuoqi/zuotian.html
 推荐查看天气：https://www.0dtq.com/tumotezuoqi/7tian.html
 推荐查看天气：https://www.0dtq.com/tumotezuoqi/10tian.html
 推荐查看天气：https://www.0dtq.com/tumotezuoqi/15tian.html
 推荐查看天气：https://www.0dtq.com/tumotezuoqi/40tian.html
 推荐查看天气：https://www.0dtq.com/tuoketuo/
 推荐查看天气：https://www.0dtq.com/tuoketuo/zuotian.html
 推荐查看天气：https://www.0dtq.com/tuoketuo/7tian.html
 推荐查看天气：https://www.0dtq.com/tuoketuo/10tian.html
 推荐查看天气：https://www.0dtq.com/tuoketuo/15tian.html
 推荐查看天气：https://www.0dtq.com/tuoketuo/40tian.html

写事件处理函数时，我见过太多人在 click 回调里随手用 e.target 去改样式或取数据，结果在嵌套结构里翻车。比如一个卡片列表，点击内部的删除按钮，却把整个卡片的背景色改了；或者用事件委托监听 ul，点击 li 里的 span 时拿到的 target 是 span，而你需要的是那个 li。这类问题的根源就是没分清 e.target 和 e.currentTarget。target 始终指向触发事件的原始元素，也就是你实际点中的那个节点；currentTarget 则指向当前绑定监听器的那个元素。在事件冒泡过程中，target 不会变，但 currentTarget 会随着事件流经过的每个监听元素而改变。这篇文章从 DOM 事件模型讲起，结合事件委托、动态元素、React 合成事件等场景，把这两个属性的行为差异和常见误用一次说清楚。

别再混淆了：JavaScript 中 e.target 与 e.currentTarget 的真实区别与实战踩坑

写事件处理函数时，我见过太多人在 click 回调里随手用 e.target 去改样式或取数据，结果在嵌套结构里翻车。比如一个卡片列表，点击内部的删除按钮，却把整个卡片的背景色改了；或者用事件委托监听 ul，点击 li 里的 span 时拿到的 target 是 span，而你需要的是那个 li。这类问题的根源就是没分清 e.target 和 e.currentTarget。target 始终指向

编程语言

理解JavaScript事件处理中e.target与e.currentTarget的区别，避免在嵌套DOM结构、事件委托及异步回调中踩坑。本文详解两者行为差异、currentTarget在异步中被置空的原理，并结合React合成事件、disabled按钮陷阱给出判断标准与最佳实践。

代码解释

容器

ReAct 

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

别再混淆了：JavaScript 中 e.target 与 e.currentTarget 的真实区别与实战踩坑-腾讯云开发者社区-腾讯云

别再混淆了：JavaScript 中 e.target 与 e.currentTarget 的真实区别与实战踩坑

别再混淆了：JavaScript 中 e.target 与 e.currentTarget 的真实区别与实战踩坑

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐