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

Question

With below code I noticed that in the browser console when I log the event, the value for currentTarget logs null. However when I log e.currentTarget it logs a value. Any idea's on how that works?

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

A jsbin can be found here: http://jsbin.com/xatixa/2/watch?html,js,output

I suspect it's related to the fact that the objects logged in the console are "live", they're linked to the actual object in memory. So while the handler is running, the target is non-null, but the property changes to null later on, and that's what you see when you expand the object in the console. — Barmar
– Barmar, Commented Oct 22, 2014 at 4:21

Barmar · Accepted Answer · 2014-10-22 04:42:03Z

47

This is an artifact of the way the Javascript console works when you log an object. The log doesn't contain a copy of all the object properties, it just contains a reference to the object. When you click on the disclosure triangle, it then looks up all the properties and displays them.

In this case, at the time you call console.log(e), there's a DOM element in the currentTarget property. But sometime later, that property is reset to null for some reason. When you expand the event object, that's what you see.

A simple example that demonstrates this is:

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

When you view the object in the console, you'll see that foo.longprefix90 contains "abc", even though it contained 90 at the time that console.log(foo) was called.

The demonstration needs to use an object with lots of properties. When it's logging, it shows the first few properties that fit in the console, so those are in the early snapshot. Only properties after that display this anomalous behavior.

answered Oct 22, 2014 at 4:42

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arjen de Vries Over a year ago

Ah yes, that makes sense. Tnx.

Ethan Wu Over a year ago

I also encounter this issue just now, with the help of jQuery, i can log the value instead of reference : console.log($.extend({}, e))

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related