JavaScript Events
DOMContentLoadedandloadtell you when the page is ready to work with.
A script that runs too early cannot find the elements it needs.
These events say when it is safe to start.
Example
javascript
document.addEventListener("DOMContentLoaded", function () {
console.log("the HTML is ready");
});
document.dispatchEvent(new Event("DOMContentLoaded"));On a real page the browser fires this itself.
DOMContentLoaded fires when the HTML is parsed and the DOM is built.
load fires later, once images and stylesheets have finished too.
DOMContentLoaded is the one you usually want.
Syntax
javascript
document.addEventListener("DOMContentLoaded", handler);
window.addEventListener("load", handler);DOMContentLoaded is on document; load is on window.
A script in the head runs before the body has been parsed.
Any element it looks for is still missing.
Example
javascript
document.body.innerHTML = "";
const missing = document.getElementById("later");
console.log(missing === null ? "not built yet" : "found");getElementById returned null.
Everything inside the handler runs once the elements exist.
Example
javascript
document.addEventListener("DOMContentLoaded", function () {
document.body.innerHTML = '<p id="demo">Ready</p>';
console.log(document.getElementById("demo").textContent);
});
document.dispatchEvent(new Event("DOMContentLoaded"));The element was there by the time the handler ran.
Use it only when you need images to have finished, such as measuring one.
Example
javascript
window.addEventListener("load", function () {
console.log("images and styles are done too");
});
window.dispatchEvent(new Event("load"));load can be much later than DOMContentLoaded on a heavy page.
A script at the end of the body already has the whole DOM available.
defer on a script in the head does the same thing.
Example
javascript
document.body.innerHTML = '<p id="demo">Already here</p>';
console.log(document.getElementById("demo").textContent);With defer or a script at the end, no event is needed.
If the event has already happened, your handler never runs.
document.readyState lets you check.
Example
javascript
console.log(document.readyState === "loading" ? "still loading" : "already done");Values are loading, interactive and complete.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Page Load Events</title>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("out").textContent = "The DOM is ready";
});
window.addEventListener("load", function () {
document.getElementById("out").textContent += " and everything has loaded";
});
</script>
</head>
<body>
<h1>Page Load Events</h1>
<p id="out"></p>
</body>
</html>Run the above example in the Try It Editor.
Try removing the wrapper:
Take the code out of the listener and watch it fail to find the element.
DOMContentLoaded fires when the HTML has been parsed.load fires once images and styles are done as well.DOMContentLoaded is on document, load is on window.document.readyState says how far along the page is.These events solve the oldest problem in browser JavaScript: running too early.
Modern code often avoids them with defer or a script at the end.
Knowing them still matters, because you will meet them everywhere.