The study of onload events and Window,document,body

Today, in the work of the OnLoad event, found some interesting things, such as generally speaking, if we need to bind a DOM structure to an event, we generally use the following method (for example, Window object):

Phenomenon

Window.onload = function () {console.log (' <span style= "font-family:arial, Helvetica, Sans-serif;" >window.onload</span><span style= "font-family:arial, Helvetica, Sans-serif;" > ');</span>};           Window.addeventlistener && window.addeventlistener ("Load", function () {console.log (' window.addevent ');});

To execute both methods, you can see the following:

Note that both methods are triggered, and at this point the IE performance is consistent.

Next, let's try the document object.

Document.onload = function () {console.log (' document.onload ');};           Window.addeventlistener && document.addeventlistener ("Load", function () {console.log (' <span style= ') Font-family:arial, Helvetica, Sans-serif; >document</span>.addevent ');}); Window.attachevent && document.attachevent (' onload ', function () {console.log (' document.attachevent ');});

After execution, it is found that the OnLoad event of document is not triggered either way.

And then, let's try the body object.

Document.body.onload = function () {console.log (' body.onload ');}; Window.addeventlistener && document.body.addEventListener ("Load", function () {console.log (' body.addevent ') ;}); Window.attachevent && document.body.attachEvent (' onload ', function () {console.log (' body.attachevent ');});

Results such as:

As you can see, the description is triggered only by the OnLoad method binding in this notation.

And more fun, when using the OnLoad method for both body and window, only the OnLoad method of window triggers

The specific code is as follows:

Document.body.onload = function () {console.log (' body.onload ');}; Window.onload = function () {console.log (' window.onload ');}

Execution results such as:

Conclusion

So the summary is as follows:
1. OnLoad and AddEventListener are triggered when used on a window

2, when used in document, does not trigger

3, when used on the body, only the OnLoad trigger

4. When both the Body and window use the OnLoad method, the body method is eaten.

"In-depth study"

The research here is mainly to see some of the description of the draft, the fear of translation is not good, paste the original text, seemingly load events and other there are many different,

6.1.6.3 Event Firing

certain operations and methods is defined as firing events on elements. For example, The click ()  method on The htmlelement   interface is defined as firing a  Click  event on the element. [domevents]

firing a simple event named e means e that a event with the name, which does not bubble (except where otherwise stated) and was not cancelable (exce PT where otherwise stated), and which uses Event the interface, must is dispatched at the given target.

firing a synthetic mouse event named e means that a event with the namee, which does not bubble (except where otherwise stated) and are not cancelable (except where otherwise stated), and which u SES theMouseEventInterface, must is dispatched at the given target. The event object must has itsscreenX,screenY,clientX,clientY, andbuttonAttributes set to 0, itsctrlKey,shiftKey,altKey, andmetaKeyAttributes set according to the current state of the key input device, if any (false for any keys is not available), Itsdetailattribute set to 1, and itsrelatedTargetattribute set to NULL. ThegetModifierState()method on the object must return values appropriately describing the state of the key input device at the time the event I S created.

firing a click event means firing a synthetic mouse event named click , which Bubbles and is cancelable.

The default action of these events is to does nothing except where otherwise stated.

6.1.6.4Events and the WindowObject

when an event was dispatched at a DOM node in A document  in a browsing context, if the event is not A load  event, the user agent must also dispatch the event to The window , as follows:

1. In the capture phase, the event must propagate to the Window object before propagating to any of the nodes, as if Window the Object was the parent of the the the The Document dispatch chain.
2. In the bubble phase, the event must propagate the object at Window the end of the phase, unless bubbling have been pre Vented, again as if the object was the parent of the the the The Window Document dispatch chain

In addition, in section 6.1.6.2, there is a detailed description of the Window,document,body object support for each event, because it is too long to be posted.

Ps: This article is purely personal research, if there is a fallacy, please point out, extremely grateful.

The study of onload events and Window,document,body