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?

peter
  • 379
  • 2
  • 6
  • 16
  • Why do you assume that `document` emits a `load` event? – t.niese Jun 12 '22 at 10:34
  • And about `readystatechange` is your question why it is called for `document`, or why it is called twice? – t.niese Jun 12 '22 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? – peter Jun 12 '22 at 10:41
  • 1
    see: [JS window.onload Usage Vs Document](https://stackoverflow.com/questions/49092746/js-window-onload-usage-vs-document) – pilchard Jun 12 '22 at 11:21

3 Answers3

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.

t.niese
  • 39,256
  • 9
  • 74
  • 101
  • 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 Jun 14 '22 at 08:18
  • 1
    @peter the `document.body.onload = function(e) {` was probably a bad example. If you look at [the specs](https://html.spec.whatwg.org/multipage/sections.html#the-body-element) `[...]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. – t.niese Jun 14 '22 at 10:22
  • 1
    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). – t.niese Jun 14 '22 at 10:27
  • 1
    [load, WIndow](https://html.spec.whatwg.org/multipage/indices.html#event-load): `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. – t.niese Jun 14 '22 at 10:34
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

pilchard
  • 12,414
  • 5
  • 11
  • 23
Michael
  • 1,931
  • 2
  • 8
  • 22
  • But console.log(document) shows .onload is there, together with .onloadstart and .onloadend. – peter Jun 12 '22 at 10:38
  • @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`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) to add listeners rather than the inline attributes. – pilchard Jun 12 '22 at 10:55
  • @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 Jun 12 '22 at 11:15
  • @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. – pilchard Jun 12 '22 at 11:24
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.

Jojos bizzare JS
  • 65
  • 2
  • 9