How to wait for the DOM ready event in plain JavaScript
New Courses Coming Soon
Join the waiting lists
How to run JavaScript as soon as we can, but not sooner
You can do so by adding an event listener to the document
object for the DOMContentLoaded
event:
document.addEventListener('DOMContentLoaded', (event) => {
//the event occurred
})
I usually don’t use arrow functions inside for the event callback, because we cannot access this
.
In this case we don’t need so, because this
is always document
. In any other event listener I would just use a regular function:
document.addEventListener('DOMContentLoaded', function (event) {
//the event occurred
})
for example if I’m adding the event listener inside a loop and I don’t really know what this
will be when the event is triggered.
→ Read my DOM Tutorial on
The Valley of Code
→ Read my
Browser Events Tutorial
on The Valley of Code
→ Read my
Browser APIs Tutorials
on The Valley of Code
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- THE VALLEY OF CODE your web development manual
- BOOKS 17 coding ebooks you can download for free on JS Python C PHP and lots more
- Interesting links collection
- Follow me on X