How to wait for the DOM ready event in plain JavaScript
New Course Coming Soon:
Get Really Good at Git
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
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X