# How to wait for the DOM ready event in plain JavaScript

> Learn how to run plain JavaScript as soon as the page is ready by listening for the DOMContentLoaded event on the document with addEventListener.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2018-10-17 | Topics: [Web Platform](https://flaviocopes.com/tags/platform/) | Canonical: https://flaviocopes.com/dom-ready/

You can do so by adding an event listener to the `document` object for the `DOMContentLoaded` event:

```js
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:

```js
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.