记录事件对象时,currentTarget为null,但是在记录event.currentTarget时,它会记录一个值.这是为什么？

Question

使用下面的代码我注意到,在我记录事件时,在浏览器控制台中,currentTarget的值记录为null.但是,当我记录e.currentTarget时,它会记录一个值.关于它是如何工作的任何想法？

var button = document.getElementById("btn");

var eventButtonHandler = function(e) {
  var button = e.target;
  console.log(e); // logs MouseEvent object with currentTarget:null
  console.log(e.currentTarget); // logs a value
  if(!button.classList.contains("active"))
    button.classList.add("active");
  else
    button.classList.remove("active");
};

button.addEventListener("click", eventButtonHandler);

可以在这里找到一个jsbin:http://jsbin.com/xatixa/2/watch？html,js,output

Answer 1

这是Javascript控制台在记录对象时的工作方式.日志不包含所有对象属性的副本,它只包含对象的引用.当您单击显示三角形时,它会查找所有属性并显示它们.

在这种情况下,在您调用时console.log(e),currentTarget属性中有一个DOM元素.但不久之后,null由于某种原因,该属性被重置.展开event对象时,就是您所看到的内容.

一个简单的例子证明了这一点:

var foo = { };
for (var i = 0; i < 100; i++) {
    foo['longprefix' + i] = i;
}
console.log(foo);
foo.longprefix90 = 'abc';

当您在控制台中查看对象时,即使它在被调用时foo.longprefix90包含"abc",也会看到包含该对象.90console.log(foo)

演示需要使用具有许多属性的对象.当它进行日志记录时,它会显示适合控制台的前几个属性,因此它们位于早期快照中.之后只有属性才会显示此异常行为.