Window Reflecting Body Element Event Handlers

Instructor: [0:00] The HTML spec calls out that a particular set of event handlers added to the body element behave as if they were attached to the window object. This set of event handlers is known as the Window-reflecting body element event handler set, which is a bit of a mouthful.

[0:19] What that means is that for HTML attribute event handlers and object property event handlers, for the blur, error, focus, load, resize and scroll events, if they are added to the body element, they will behave as if they were added to the window object.

[0:36] Here I'm adding an onfocus object property event handler to the body element. onfocus is a Window-reflecting body element event handler, and so we should expect that this event handler is being bound to the window and not to the body.

[0:50] In my onfocus function, I'm going to log out the this runtime context. I've said previously that the this runtime context of an object property event handler should match the event target that the event handler was added to. I'm also logging out the current target of the event, which again, should point to the event target that this event handler was added to.

[1:12] Down here, I'm going to dispatch a new event on the body element. I'm going to dispatch a new focus event. Let's see what happens in the browser.

[1:22] In our onfocus function, the this runtime context was set to window, and the current target was set to window. If I change this event target to window, then we're going to see exact same result over here, the this is window and current target is window as well.

[1:35] I'm now going to add a focus event listener to the body element using addEventListener, rather than using an onfocus object property event handler. Again, I'm going to log out the this runtime context and the event.currentTarget property.

[1:50] If I come up to the browser for the event listener created with addEventListener, we'll see that the this runtime context was the element body that we added the event listener to. That also matches the event.currentTarget property. The window reflecting behavior on the body element does not apply to event listeners that were created with the addEventListener API.

[2:13] We'll see something else that's a bit strange going on. Our event listener that we added with addEventListener is being logged before our object property event handler.

[2:24] Now we're dispatching our focus event on the body element. Firstly, the event is going to start at the window, head down to the body element, and then bubble back up again. Both these event listeners are bubble event listeners.

[2:39] If both of these event listeners were being added to the body element, then this one would be logged out first, because it was bound first. However, we're seeing this one's being logged out first. That's because as the event is bubbling back up from the body, back up to the window, it's first hitting this event listener that was added to the body element, and so this is being logged out.

[3:02] Then it's continuing to bubble up the tree where it will hit this onfocus object property event handler, which is being bound to the window. That's why this event handler is being logged out second.

[3:15] In every way, this object property event handler is being treated as if it was added to the window object.