为什么currentTarget值为空

Question

我正在学习

event.target

和

event.currentTarget

。我想我很清楚两者之间的区别。但陷入了

event.currentTarget

值变为空的情况。

以下是 HTML 和 JS 代码片段：

HTML 代码

<form id="form">
   This is a form
</form>

JavaScript 代码

 form.addEventListener('click', func);

 function func(event) {
    console.log(event.target.tagName);  //line1
    console.log(event.currentTarget.tagName); //line2

    setTimeout(()=> {
       console.log(event.target.tagName);  //line3
       console.log(event.currentTarget.tagName); //line4
    }, 0)  ;
 }

我的疑问是，在第 1 行和第 3 行中，我得到的

event.target

值相同。但是第2行和第4行中

event.currentTarget

的值有差异。

第3行的输出是'form'，但第4行的输出是：

未捕获类型错误：无法读取 null 的属性“tagName”。

这意味着

currentTarget

 在第 4 行

中为空。

你能解释一下为什么第4行中currentTarget

的值为

null

吗？

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget。注意这行

注意： event.currentTarget

 的值仅在事件处理时可用。如果您 

console.log()

 事件对象，将其存储在变量中，然后在控制台中查找 

currentTarget

 键，其值将为 null`。

Answer 2

currentTarget 有一些特殊行为，请阅读

mozilla 的文档，或了解更多详细信息，请检查此 why-is-event-currenttarget-null

Answer 3

要在

event.currentTarget

 回调中使用 

setTimeout

，您必须将值存储在变量中：

function handleClick(event) {
  const formElement = event.currentTarget;
  setTimeout(() => {
    console.log(formElement.tagName);
  }, 100);
}

form.addEventListener('click', handleClick);