控制台输出与js文件输出不一致 （event.currentTarget得到null）

Question

代码：

const target = document.getElementById('target');
let e;
target.addEventListener('click', function (event) {
    e = event;
    console.log(e);
    console.log(e.currentTarget);
});

控制台输出：

MouseEvent {isTrusted: true, screenX: 149, screenY: 253, clientX: 149, clientY: 131, …}
<div id=​"target">​</div>​

然而，在控制台输入：

console.log(e);
console.log(e.currentTarget);

得到的结果却是：

VM1656:1 MouseEvent {isTrusted: true, screenX: 149, screenY: 253, clientX: 149, clientY: 131, …}
VM1656:2 null

显然，event对象是相同的，但是为什么控制台输出currentTarget是null？

从控制台查看event对象中的currentTarget，其值是null，那为什么js文件中输出的currentTarget不是null？

Answer 1

根据 W3C 规范：

https://www.w3.org/TR/DOM-Lev...

currentTarget - Used to indicate the EventTarget whose EventListeners are currently being processed. This is particularly useful during capturing and bubbling.

currentTarget 在事件正在处理过程中使用。

你试试下面代码：

const target = document.getElementById('target');
let e;
target.addEventListener('click', function (event) {
    setTimeout(function () {
        e = event;
        console.log(e);
        console.log(e.currentTarget);
    })
});

currentTarget 同样是 null，因为当读取 currentTarget 属性时，事件处理已经结束了。

Answer 2

你在控制台只输入了后面两句，这个明显主体都不对了，前面那个event是执行过程中捕获到的，后面的就不是一个东西啊。简单说就是上下文环境都不一样了。