基础概念
target
指的是触发事件的元素,谁触发了事件,谁就是target
currentTarget
则是当前绑定或者处理该事件的元素
例如在事件流:a->b->c->d->c->b->a 中,点击了 d,那么 d 就是 target,在 c 上绑定了监听函数,那么 c 就是 currentTarget
一个简单的例子
例如,假设有一个嵌套的 HTML 结构:当点击 button
元素时,event.target
就是 button
元素(#child
),因为它是触发点击事件的源头。而 event.currentTarget
是正在处理这个点击事件的元素,也就是添加了事件监听的 div
元素(#parent
)。
<div id="parent">
<button id="child">点击我</button>
</div>
document.getElementById('parent').addEventListener('click', function(event) {
console.log(event.target.id); // 输出:child
console.log(event.currentTarget.id); // 输出:parent
});
事件委托中的target和currentTarget
再比如,在一个复杂的表单中,有多个输入框和按钮,当点击某个输入框时,target
就是那个被点击的输入框,而如果给整个表单添加了事件监听,那么 currentTarget
就是这个表单。
<form id="myForm">
<label for="username">用户名:</label>
<input type="text" id="username">
<br>
<label for="password">密码:</label>
<input type="password" id="password">
<br>
<button type="submit">提交</button>
</form>
document.getElementById('myForm').addEventListener('click', function(event) {
console.log('currentTarget: ' + event.currentTarget.id);
console.log('target: ' + event.target.id);
});