document.readyState on DOMContentLoaded?

The value of the readyState property is at least "interactive" when DOMContentLoaded is fired. As @MTCoster pointed out here, the event is deferred until linked scripts with defer attribute and module scripts, linked or inline, have executed. See also this post.


The value of the readyState property is always "interactive" when DOMContentLoaded has fired. This is evidenced by the fact that the MDN documentation claims:

// alternative to DOMContentLoaded event
document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    initApplication();
  }
}

is interchangeable with a DOMContentLoaded handler. You can also have a look at the spec here, which reiterates this.


As per accepted answer:

The value of the readyState property is always "interactive" when DOMContentLoaded has fired.

Wrong

It has either of:

  • interactive
  • complete

document . readyState ref.

Returns "loading" while the Document is loading, "interactive" once it is finished parsing but still loading subresources, and "complete" once it has loaded.

If one attach an event listener to readystatechange before Document has state interactive one can check for interactive alone, like with example from MDN. Then one will catch the state if it ever reaches it.

However if one check the state at a later stage it is not.

Also by example from MDN, these are equal:

document.onreadystatechange = function () {
  if (document.readyState === 'interactive') {
    initApplication();
  }
}


document.addEventListener("DOMContentLoaded", function () {
    initApplication();
});

That does not mean:

if (document.readyState !== 'loading')
    assert(document.readyState === 'interactive')

Which the answer suggests.

As to say:

  • document.addEventListener("DOMContentLoaded", ...

will never equal to:

  • window.addEventListener('load', ...