The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
| Bubbles | Yes |
|---|---|
| Cancelable | Yes (although specified as a simple event that isn't cancelable) |
| Interface | Event |
| Event handler property | None |
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.
Examples
Basic usage
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM fully loaded and parsed');
});
Specifications
| Specification | Status | Comment |
|---|---|---|
| HTML Living Standard The definition of 'DOMContentLoaded' in that specification. |
Living Standard | |
| HTML5 The definition of 'DOMContentLoaded' in that specification. |
Recommendation |
Browser compatibility
| Desktop | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
DOMContentLoaded event | Chrome Full support 1 | Edge Full support Yes | Firefox Full support 1 | IE Full support 9 | Opera Full support 9 | Safari Full support 3.1 | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
See also
- Related events:
load,readystatechange,beforeunload,unload - This event on
Documenttargets:DOMContentLoaded