javascript: Window Reflecting Frame Component Tournament Handlers

(*1*)(*15*)

Trainer: [0:00] The HTML spec calls out {that a} explicit set of match handlers added to the frame component behave as though they had been hooked up to the window object. This set of match handlers is referred to as the Window-reflecting frame component match handler set, which is slightly of a mouthful.

(*13*) What that implies is that for HTML characteristic match handlers and object belongings match handlers, for the blur, error, center of attention, load, resize and scroll occasions, if they’re added to the frame component, they are going to behave as though they had been added to the window object.

(*12*) Right here I am including an onfocus object belongings match handler to the frame component. onfocus is a Window-reflecting frame component match handler, and so we will have to be expecting that this match handler is being certain to the window and to not the frame.

[0:50] In my onfocus serve as, I’ll log off the this runtime context. I have stated prior to now that the this runtime context of an object belongings match handler will have to fit the development goal that the development handler used to be added to. I am additionally logging out the present goal of the development, which once more, will have to level to the development goal that this match handler used to be added to.

[1:12] Down right here, I’ll dispatch a brand new match at the frame component. I’ll dispatch a brand new center of attention match. Let’s have a look at what occurs within the browser.

[1:22] In our onfocus serve as, the this runtime context used to be set to window, and the present goal used to be set to window. If I alter this match goal to window, then we are going to see very same end result over right here, the that is window and present goal is window as neatly.

[1:35] I am now going so as to add a focal point match listener to the frame component the usage of addEventListener, fairly than the usage of an onfocus object belongings match handler. Once more, I’ll log off the this runtime context and the development.currentTarget belongings.

[1:50] If I come as much as the browser for the development listener created with addEventListener, we’re going to see that the this runtime context used to be the component frame that we added the development listener to. That still fits the development.currentTarget belongings. The window reflecting conduct at the frame component does now not practice to match listeners that had been created with the addEventListener API.

[2:13] We will see one thing else that is slightly odd happening. Our match listener that we added with addEventListener is being logged prior to our object belongings match handler.

[2:24] Now we are dispatching our center of attention match at the frame component. At first, the development goes to begin on the window, head all the way down to the frame component, after which bubble again up once more. Each those match listeners are bubble match listeners.

[2:39] If either one of those match listeners had been being added to the frame component, then this one can be logged out first, as it used to be certain first. Then again, we are seeing this one’s being logged out first. That is as a result of as the development is effervescent again up from the frame, again as much as the window, it is first hitting this match listener that used to be added to the frame component, and so that is being logged out.

(*3*) Then it is proceeding to bubble up the tree the place it’s going to hit this onfocus object belongings match handler, which is being certain to the window. That is why this match handler is being logged out 2nd.

(*2*) In each means, this object belongings match handler is being handled as though it used to be added to the window object.