鍍金池/ 問(wèn)答/HTML/ 控制臺(tái)輸出與js文件輸出不一致 （event.currentTarget得到nu

控制臺(tái)輸出與js文件輸出不一致 （event.currentTarget得到null）

代碼：

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

控制臺(tái)輸出：

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

然而，在控制臺(tái)輸入：

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

得到的結(jié)果卻是：

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

顯然，event對(duì)象是相同的，但是為什么控制臺(tái)輸出currentTarget是null？

從控制臺(tái)查看event對(duì)象中的currentTarget，其值是null，那為什么js文件中輸出的currentTarget不是null？

回答
編輯回答
玩控

你在控制臺(tái)只輸入了后面兩句，這個(gè)明顯主體都不對(duì)了，前面那個(gè)event是執(zhí)行過(guò)程中捕獲到的，后面的就不是一個(gè)東西啊。簡(jiǎn)單說(shuō)就是上下文環(huán)境都不一樣了。

2017年6月23日 11:42
編輯回答
離魂曲

根據(jù) W3C 規(guī)范：

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 在事件正在處理過(guò)程中使用。

你試試下面代碼：

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，因?yàn)楫?dāng)讀取 currentTarget 屬性時(shí)，事件處理已經(jīng)結(jié)束了。

2017年1月7日 19:51