原生Event对象currentTarget属性为何为null？如何解决？

我来帮你拆解这个问题哈！你观察到的原生currentTarget为null、但jQuery版本正常的差异，核心原因在于两者对事件对象的处理逻辑不一样：

为什么原生currentTarget会是null？ #

• 原生的Event.currentTarget是动态临时绑定的属性：它只有在事件处理函数执行过程中才会指向当前正在处理事件的元素。一旦函数执行完毕，浏览器就会重置这个属性的值为null——这也是你在控制台展开Event对象时看到null的原因（毕竟控制台展开对象的时候，函数早就执行完了）。
• 而jQuery做了一层封装：它会在事件触发的瞬间，把currentTarget的引用保存到自己封装的事件对象里，所以哪怕你事后查看，也能看到正确的元素指向。

解决办法 #

有两个简单的方案可以解决这个问题：

1. 在事件处理函数执行时保存currentTarget的引用 #

直接在函数内部把e.currentTarget赋值给一个变量，这样哪怕函数执行完毕，这个变量依然会保留元素的引用：

let child = $(".child").get(0);
child.addEventListener("click", function(e) {
    // 先把currentTarget存到变量里
    const currentElement = e.currentTarget;
    console.log(currentElement); // 这里能正常拿到元素
    this.style.backgroundColor = "blue";
    // 就算异步操作也能正常使用
    setTimeout(() => {
        console.log(currentElement); // 依然有效
    }, 1000);
}, false);

2. 直接用this替代e.currentTarget #

在普通的事件处理函数（非箭头函数）中，this的指向和e.currentTarget完全一致，都是当前绑定事件的元素。你代码里已经用到了this.style.backgroundColor="blue"，其实这就是一个很好的替代示例，完全可以用this来代替e.currentTarget的场景。

内容的提问来源于stack exchange，提问作者Brandon