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

SYLiu
  • 544

代码:

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对象是相同的,但是为什么控制台输出currentTargetnull

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

回复
阅读 1.4k
2 个回答
✓ 已被采纳

根据 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 属性时,事件处理已经结束了。

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏