2

By looking at the output of console.log(document), I find document has these properties:onload=null;onloadstart=null;onloadend=null;onreadystatechange=null; I write the following code:

<html> <head><title>test</title></head> <body> <script> document.onload=function(){alert("document.onload");}; document.onloadstart=function(){alert("document.onloadstart");}; document.onloadend=function(){alert("document.onloadend");}; document.onreadystatechange=function(){alert("document.onreadystatechange");}; </script> <div>hello</div> </body> </html>

Interestingly, document.onload,document.onloadstart,document.onloadend are never called, while document.onreadystatechange is called twice, why?

Improve this question
4
  • Why do you assume that document emits a load event? Commented Jun 12, 2022 at 10:34
  • And about readystatechange is your question why it is called for document, or why it is called twice? Commented Jun 12, 2022 at 10:34
  • @t.niese I can understand why document.onreadystatechange is called twice but cannot understand why document.onload is not called. If document does not emit onload at all, why document has that property? Commented Jun 12, 2022 at 10:41
  • 1
    see: JS window.onload Usage Vs Document Commented Jun 12, 2022 at 11:21

3 Answers 3

Reset to default
2

Why isn't document.onload called?

First of all the load events (created by the browser) do not bubble (because that's how it is specified):

document.body.onload = function(e) { console.dir(e.bubbles) }

So you can only listen for these load events, on the element for which they occur.

And for Document there is no load event listed that will be triggered based on the standard.

readystatechange on the other hand is listed as an event that can happen for document.

You can however for sure listen for load events on the document and the event callback will be called. But that will only happen if you e.g. manually trigger one on document:

const event = new Event('load'); document.onload = function (e) { console.log('load document') } document.dispatchEvent(event);

Or if you emit a load event that bubbles on a descendant:

const event = new Event('load', {bubbles: true}); document.onload = function (e) { console.log('load document') } document.body.dispatchEvent(event);

So why does onload then appear as a property? That's due to the GlobalEventHandlers and Document includes GlobalEventHandlers), and due to event handler IDL attribute, exposing those as on… event properties.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I still have a little confusion. Looking at the output of document.body.onload = function(e) { console.dir(e); }, you can see e.target is document not document.body. So, theoretically, the event should be handled by document.onload instead of document.body.onload. Why is document.body.onload instead of document.onload called?
@peter the document.body.onload = function(e) { was probably a bad example. If you look at the specs [...]The body element exposes as event handler content attributes a number of the event handlers of the Window object.[...]. Why the target is document and not window is something I don't know. Maybe it dates back to the time of the "browser war" and now it can't be changed anymore without breaking many scripts.
Maybe the initial logic was the event says that the document is loaded, so the target of the event is the document, but if you have an "empty" window in which you want to load the document you would need to listen on the window (as the document does not exists yet).
load, WIndow: Fired at the Window when the document has finished loading; fired at an element containing a resource (e.g. img, embed) when it resource has finished loading So the logic is likely to be window is the element containing a resource, document the resource.
1

I'm unsure, but try this:

window.addEventListener('load', () => { alert("document.onload") })

I only use window onload event, but if I never saw document onload event, just change window to document.

Like I said´, I'm unsure what to do, because the amount of your code, which you showed is to less.

Improve this answer

Comments

1

.onload is part of the window object, not for document. GlobalEventHandlers.onload

The onload property of the GlobalEventHandlers mixin is an event handler that processes load events on a Window, XMLHttpRequest, <iframe> and <img> elements, etc.

And from what i've seen on MDN .onloadstart and .onloadend are used for resources like images, don't know if they are availiable for document/window. GlobalEventHandlers.onloadstart

But I think with onreadystatechange you should be able to emulate the behavior of onloadstart and onloadend.
Document.readyState

Improve this answer

4 Comments

But console.log(document) shows .onload is there, together with .onloadstart and .onloadend.
@peter You can add any property you like to an element, but that doesn't mean it will do anything. In general it is recommended to use addEventListener to add listeners rather than the inline attributes.
@pilchard it is recommended to use addEventListener to add listeners I fully agree with that. And also with You can add any property you like to an. The OP is likely referring to document.onload to already existing (it is set to null) by default.
@t.niese ah, I see, yes both Document and Window implement the GlobalEventHandlers mixin but as you noted that doesn't mean they necessarily fire.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.