<think>我们正在讨论事件处理中的两个重要属性：e
.target 和 e
.current
Target。
在事件冒泡或捕获过程中，这两个属性代表不同的DOM节点。
简单来说：
- e
.target：指的是触发事件的原始元素（即事件最初发生的元素）。
- e
.current
Target：指的是当前正在处理该事件的元素（即绑定事件处理程序的元素）。
下面用代码示例
和详细解释来说明。</think>### `e
.target` 与 `e
.current
Target` 的
区别详解
在 JavaScript 事件处理中，`e
.target`
和 `e
.current
Target` 都是事件
对象的重要属性，但它们代表不同的元素：
#### 核心
区别
| 属性 | 指向
对象 | 是否变化 | 典型使用场景 |
|------|----------|----------|--------------|
| **`e
.target`** | 实际触发事件的元素 | ❌ 固定不变 | 事件委托中识别实际触发元素 |
| **`e
.current
Target`** | 当前处理事件的元素 | ✅ 随事件传播变化 | 访问绑定事件处理程序的元素 |
---
### 代码示例与解释
```html
<div id="parent">
<button id="child">点击我</button>
</div>
<script>
const parent = document
.getElementById('parent');
const child = document
.getElementById('child');
parent
.addEventListener('click', function(e) {
console
.log('
target:', e
.target.id); // 输出: child
console
.log('current
Target:', e
.current
Target.id); // 输出: parent
// 验证关系
console
.log(e
.target === child); // true
console
.log(e
.current
Target === parent); // true
console
.log(e
.current
Target ===
this); // true (在普通
函数中)
});
</script>
```
#### 执行结果：
```
target: child
current
Target: parent
true
true
true
```
---
### 详细说明
#### 1
. **`e
.target`**
- **定义**：事件发生的**实际目标元素**（最深层元素）
- **特点**：
- 始终指向最初触发事件的元素
- 在事件传播过程中保持不变
- **使用场景**：
```javascript
// 事件委托：在父元素处理子元素事件
document
.querySelector('ul')
.addEventListener('click', (e) => {
if(e
.target.tagName === 'LI') {
console
.log('点击了列表项:', e
.target.textContent);
}
});
```
#### 2
. **`e
.current
Target`**
- **定义**：当前正在处理事件的元素
- **特点**：
- 随事件传播阶段变化（捕获 → 目标 → 冒泡）
- 在事件处理
函数中等于 `
this`（箭头
函数除外）
- **使用场景**：
```javascript
// 访问绑定事件的元素属性
document
.querySelectorAll('
.btn')
.forEach(btn => {
btn
.addEventListener('click', function(e) {
// 获取当前按钮的data属性
const action = e
.current
Target.dataset
.action;
console
.log('执行操作:', action);
});
});
```
---
### 事件传播阶段演示
```html
<div id="grandparent">
<div id="parent">
<div id="child">点击这里</div>
</div>
</div>
<script>
const logEvent = (phase) => (e) => {
console
.log(`${phase}:`);
console
.log('
target: ${e
.target.id}');
console
.log(' current
Target: ${e
.current
Target.id}\n');
};
document
.getElementById('grandparent')
.addEventListener(
'click', logEvent('捕获阶段'), true
);
document
.getElementById('parent')
.addEventListener(
'click', logEvent('目标阶段')
);
document
.getElementById('child')
.addEventListener(
'click', logEvent('冒泡阶段')
);
</script>
```
#### 点击 `<div id="child">` 时的输出：
```
捕获阶段:
target: child
current
Target: grandparent
目标阶段:
target: child
current
Target: child
冒泡阶段:
target: child
current
Target: parent
```
---
### 关键注意事项
1
. **箭头
函数中的 `
this`**：
```javascript
// 错误示例
button
.addEventListener('click', (e) => {
console
.log(
this); // 指向window（不是当前元素）
console
.log(e
.current
Target); // 正确方式获取当前元素
});
```
2
. **事件委托模式**：
```javascript
// 高效处理动态元素
document
.body
.addEventListener('click', (e) => {
// 使用
target 识别实际点击元素
if(e
.target.classList
.contains('dynamic-item')) {
// 处理逻辑
}
});
```
3
. **嵌套元素场景**：
```html
<button id="btn">
<span>点击文字</span>
</button>
<script>
btn
.addEventListener('click', (e) => {
console
.log(e
.target.tagName); // 可能是 SPAN
console
.log(e
.current
Target.tagName); // 总是 BUTTON
});
</script>
```
---
### 总结表格
| 特性 | `e
.target` | `e
.current
Target` |
|------|------------|-------------------|
| 事件目标 | 原始触发元素 | 当前处理元素 |
| 事件传播中 | 不变 | 随处理元素变化 |
| 等于 `
this` | ❌ | ✅（普通
函数中） |
| 事件委托 | 关键属性 | 较少使用 |
| 动态元素 | 有效识别 | 无法识别动态内容 |
| 嵌套元素 | 可能指向内部元素 | 始终指向绑定元素 |
本文详细解释了JavaScript中event.target与this的区别：event.target指向触发事件的元素，而this指向绑定事件的元素。同时，文章还对比了两者执行效率的不同，并解答了常见的关于两者比较的疑惑。
扫一扫
1212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
