控制台日志事件对象显示的对象属性与应有的属性不同

Question

[使用下面的代码，我注意到在记录事件时在浏览器控制台中，currentTarget的值记录为空。但是，当我登录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"，您也会看到90包含console.log(foo)。

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