6

Trying to handle window.onreadystatechange, I notice this event firing two times during page load. But I cannot figure out what exactly becomes changed after each event. If it were not for window, but for document, then there had been document.readyState property containing the current state. But in case of window, there isn’t any “window.readyState” or similar property. So what does it really mean when a readystatechange event for window fires, and what the difference between the first and the second firing is?

Here is my code that gives two seemingly identical console outputs:

'use strict';

window.addEventListener('readystatechange', function(e) {
  console.log(window, e);
});
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • 1
    "readyState" is indeed a property on the document object: https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState – Jeff McCloud Dec 13 '16 at 01:06
  • 1
    I don't get any events. What browser are you using? What other scripts are loaded on that page? – Bergi Dec 13 '16 at 01:10
  • @JeffMcCloud, I know a lot about `readyState` property and `readystatechange` event for `document`, but my question was about handling this event for `window`, not for `document`. –  Dec 13 '16 at 01:10
  • 1
    @Bergi, I’m using MS Edge 38.14393.0.0, and since it’s a test page, no other scripts are linked to the page. –  Dec 13 '16 at 01:14
  • 3
    Is it possible Edge somehow makes it bubble to the window ? Can you check if it corresponds to the document events ? – Kaiido Dec 13 '16 at 01:15
  • @Displayname Ah, cannot reproduce in another browser. Can you post which values you get for `e`? – Bergi Dec 13 '16 at 01:17
  • @Bergi, here it goes: { [functions]: , __proto__: { }, AT_TARGET: 2, bubbles: true, BUBBLING_PHASE: 3, cancelable: false, cancelBubble: false, CAPTURING_PHASE: 1, currentTarget: { }, defaultPrevented: false, eventPhase: 3, isTrusted: true, returnValue: true, srcElement: { }, target: { }, timeStamp: 1481592095815, type: "readystatechange" } –  Dec 13 '16 at 01:23
  • Interesting. I'll guess that `__proto__` is `Event.prototype` and `currentTarget` is `window`. But what are `target` and `srcElement`, do they refer to `document`? – Bergi Dec 13 '16 at 01:26
  • Yes @Bergi, you’re right. `target` and `srcElement` both refer to `document`, while `currentTarget` is `window`. –  Dec 13 '16 at 01:30
  • 2
    And `bubbles` is `true`, which confirms @Kaiido's theory. Although it [shouldn't](https://developer.mozilla.org/en-US/docs/Web/Events/readystatechange). And really not from `document` to `window`. Looks like a bug to me. – Bergi Dec 13 '16 at 01:45

1 Answers1

8

window only fires the readystatechange event in IE and Edge (tested in IE 11). It does NOT fire in Firefox or Chrome.

It is actually fired by the document, when its readyState changes to "interactive" and "complete" (bubbling).

Thus, in IE:

window.onreadystatechange == document.onreadystatechange

I would not recommend using it though, as this event is not fired in the other browsers.

nicovank
  • 3,157
  • 1
  • 21
  • 42
  • It's compatible with other browsers! https://developer.mozilla.org/en-US/docs/Web/API/Document/readystatechange_event#Browser_compatibility – Ali Hesari Dec 28 '20 at 17:28