How to wait for the DOM ready event in plain JavaScript
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.
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025