Onload event and window, document, body, onloaddocument

Onload event and window, document, body, onloaddocument

I used the onload event in my work today and found some interesting things. For example, if we need to bind an event to a DOM structure, we generally use the following method (taking the Window object as an example ):

[Symptom]

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 these two methods, you can see the following:

Note that both methods are triggered, and IE is consistent in this regard.

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 the document will not be triggered in any way.

Next, 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');});

The result is as follows:

It can be seen that only the bound onload method is triggered.

It is also more fun. When the onload method is used for both the body and window, only the onload method of window is triggered.

The Code is as follows:

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

The execution result is as follows:

[Conclusion]

So the summary is as follows:
1. onload and addEventListener are triggered when they are used on the window.

2. It is not triggered when document is used.

3. When using the body, only onload is triggered.

4. When both the body and window use the onload method, the body method will be eaten.

[In-depth research]

The research here mainly refers to some of the descriptions in the w3c draft, for fear of poor translation and posting the original article. It seems that the load event is different from other ones,

6.1.6.3Event firing

Certain operations and methods are defined as firing events on elements. For example,click()Method onHTMLElementInterface is defined as firingclickEvent on the element. [DOMEVENTS]

Firing a simple event namedEMeans that an event with the nameE, Which does not bubble (could t where otherwise stated) and is not cancelable (could t where otherwise stated), and which usesEventInterface, must be dispatched at the given target.

Firing a synthetic mouse event namedEMeans that an event with the nameE, Which does not bubble (could t where otherwise stated) and is not cancelable (could t where otherwise stated), and which usesMouseEventInterface, must be dispatched at the given target. The event object must have 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 that are not available), itsdetailAttribute set to 1, and itsrelatedTargetAttribute set to null.getModifierState()Method on the object must return values appropriately describing the state of the key input device at the time the event is created.

FiringclickEventMeans firing a synthetic mouse event namedclick, Which bubbles and is cancelable.

The default action of these events is to do nothing before t where otherwise stated.

6.1.6.4 Events and WindowObject

When an event is dispatched at a DOM node inDocumentIn a browsing context, if the event is notloadEvent, the user agent must also dispatch the event toWindow, As follows:

In section 6.1.6.2, the window, document, and body objects are described in detail for their support for each event. Because they are too long, they will not be pasted out.

Ps: This article is purely a personal study. If there are any mistakes, please point out, thank you very much.

How to solve windowonload and body onload in javascript

The onload event is only available in the window object. <body onload = "func"> this setting is only for convenience, but it is still a window. onload = func, and window. onload can be specified only once, and conflict is inevitable. To specify multiple functions, you can only put multiple functions into one function for calling.

Processing of js body onload events

Window. onload = function () {alert ('window load');} document. body. onload = function () {alert ('body load ');}