Log Events to the Console
It is common to log event objects to the console. However, it is important to keep in mind that object properties are evaluated in objects logged to the console when the object is first expanded.
Instructor: [0:00] Coming back to this example where I was logging a click event to the console, keen observers would've noticed some strange things.
[0:07] Firstly, the eventPhase is , which is event.NONE. We would've expected this event to be in the bubble phase because we're setting capture to false, and the current target property is set to null even though it should have been the parent element because that's the event target that this event listener was bound to.
[0:23] The reason we're seeing these values is that both Chrome and Firefox evaluate the properties on an object that you've logged to the console when you first expand it. When I first expand this object, Chrome is looking up the values of this properties. Because the event has finished dispatching, the current target has been cleared and the eventPhase is .
[0:45] In Chrome there is a little "i" icon here, I'm going to hover over it. It prints out, "This value is evaluated upon first expanding, it may have changed since then." This is calling out that the properties in this object are evaluated by the browser when I expand it for the first time. In our case, that will happen after the event is finished.
[1:05] I've gone into this behavior in detail because I've actually been burned by this before, where I've logged an event out to the console and read the properties on here, not understanding that these properties were not the point at which I did the console.log, but actually the point at which I expanded the object here.
[1:22] If I want to log out the current target property of an event, the safest thing to do is just log that property out. When I click on the button, I'll see that in the mouse event object, when I expand this object, it's getting evaluated and the current target property is set to null because the event has finished dispatching.
[1:38] My second call to console.log where I'm logging out the event target directly was successful. I can see here that I am logging out the current target, which is our parent element.
dang! i'm so grateful for you pointing out the chrome debug console gotcha.
Very informative. Thanks :)