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

console log event object shows different object properties than it should have

本文关键字：对象 属性 显示 日志 控制台 事件      更新时间：2023-09-26

在下面的代码中，我注意到在浏览器控制台中，当我记录事件时，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，输出

当您记录对象时，这是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"，尽管在调用console.log(foo)时它包含90。

演示需要使用一个具有大量属性的对象。当它进行日志记录时，它会显示适合控制台的前几个属性，因此这些属性在早期快照中。只有在此之后的属性才会显示这种异常行为。

相关文章：