target 和 current Target分别对应谁?

15 阅读1分钟

基础概念

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);
});