Window: DOMContentLoaded event
The DOMContentLoaded
event fires when the HTML document has been completely parsed, and all deferred scripts (<script defer src="…">
and <script type="module">
) have downloaded and executed. It doesn't wait for other things like images, subframes, and async scripts to finish loading.
DOMContentLoaded
does not wait for stylesheets to load, however deferred scripts do wait for stylesheets, and the DOMContentLoaded
event is queued after deferred scripts. Also, scripts which aren't deferred or async (e.g. <script>
) will wait for already-parsed stylesheets to load.
The original target for this event is the Document
that has loaded. You can listen for this event on the Window
interface to handle it in the capture or bubbling phases. For full details on this event please see the page on the Document: DOMContentLoaded
event.
A different event, load
, should be used only to detect a fully-loaded page. It is a common mistake to use load
where DOMContentLoaded
would be more appropriate.
This event is not cancelable.
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
js
addEventListener("DOMContentLoaded", (event) => {});
onDOMContentLoaded = (event) => {};
Event type
A generic Event
.
Examples
Basic usage
js
window.addEventListener("DOMContentLoaded", (event) => {
console.log("DOM fully loaded and parsed");
});
Specifications
Specification |
---|
HTML Standard # event-domcontentloaded |
Browser compatibility
BCD tables only load in the browser
See also
- Related events:
load
,readystatechange
,beforeunload
,unload
- This event on
Document
targets:DOMContentLoaded