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

С приведенным ниже кодом я заметил, что в консоли браузера, когда я регистрирую событие, значение 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

Ответы

Ответ 1

Это артефакт того, как работает Javascript-консоль при регистрации объекта. Журнал не содержит копии всех свойств объекта, он просто содержит ссылку на объект. Когда вы нажимаете на треугольник раскрытия, он затем просматривает все свойства и отображает их.

В этом случае во время вызова console.log(e) есть элемент DOM в свойстве currentTarget. Но через какое-то время это свойство reset to null по какой-то причине. Когда вы расширяете объект event, это то, что вы видите.

Простой пример, демонстрирующий это:

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