Quando si registra un oggetto evento, currentTarget è nullo, ma quando si registra event.currentTarget registra un valore. Perché?

Question

Con il codice seguente ho notato che nella console del browser quando registro l'evento, il valore per currentTarget registra null. Tuttavia quando registro e.currentTarget registra un valore. Qualche idea su come funziona?

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); 

Un jsbin può essere trovato qui: http://jsbin.com/xatixa/2/watch?html,js,output

Answer 1

Questo è un artefatto del modo in cui la console Javascript funziona quando si accede un oggetto. Il log non contiene una copia di tutte le proprietà dell'oggetto, contiene solo un riferimento all'oggetto. Quando fai clic sul triangolo di apertura, cerca tutte le proprietà e le visualizza.

In questo caso, al momento in cui si chiama console.log(e), c'è un elemento DOM nella proprietà currentTarget. Ma qualche tempo dopo, quella proprietà viene reimpostata su null per qualche motivo. Quando espandi l'oggetto event, questo è ciò che vedi.

Un semplice esempio che illustra questo è:

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

Quando si visualizza l'oggetto nella console, vedrai che foo.longprefix90 contiene "abc", anche se conteneva 90 al momento in cui è stato chiamato console.log(foo).

La dimostrazione deve utilizzare un oggetto con molte proprietà. Durante la registrazione, mostra le prime proprietà che si adattano alla console, quindi quelle sono nella prima istantanea. Solo le proprietà successive mostrano questo comportamento anomalo.