event.target VS event.currentTarget

定义

event.target为触发事件的元素。
event.currentTarget为绑定事件处理函数的元素。

示例代码

// 示例代码
<div>
    <button>按钮</button>
</div>

事件处理程序绑定在div上

当我们点击div时：
event.target为div
event.currentTarget为div。

当我们点击button时:
event.target为button。
event.currentTarget为div。

<div onClick="onClick">
    <button>按钮</button>
</div>

// 点击div
const onClick = (event) => {
    console.log(event.target)
    // 为div

    console.log(event.currentTarget) 
    // 为div
}

// 点击button
const onClick = (event) => {
    console.log(event.target)
    // 为button

    console.log(event.currentTarget)
    // 为div
}

事件处理程序绑定在button上

当我们点击div时：
由于div上没有事件处理函数，所以点击后无事发生。

当我们点击button时:
event.target为button。
event.currentTarget为button。

<div>
    <button onClick="onClick">按钮</button>
</div>

// 点击button
const onClick = (event) => {
    console.log(event.target)
    // 为button

    console.log(event.currentTarget)
    // 为button
}