При регистрации объекта события currentTarget имеет значение null, но при регистрации события event.currentTarget записывается значение. Это почему?

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) есть элемент DOM в currentTarget имущество. Но через некоторое время это свойство сбрасывается на 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) назывался.

Демонстрация должна использовать объект с множеством свойств. При ведении журнала отображаются первые несколько свойств, которые уместились в консоли, поэтому они находятся на раннем снимке. Только свойства после этого показывают это аномальное поведение.