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 for the event callback, because we cannot access this.

In this case we don’t need to, 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.

Lessons in this unit:

0:	Introduction
1:	The `window` object
2:	The `document` object
3:	Types of nodes
4:	Traversing the DOM
5:	Editing the DOM
6:	Selectors API
7:	▶︎ DOM Ready
8:	Add a class to an element
9:	Remove a class from an element
10:	Check if element has a class
11:	Change a DOM node value
12:	Loop through DOM elements
13:	Add an image to the DOM
14:	Create a DOM attribute
15:	Remove children elements
16:	Replace a DOM element
17:	insertAdjacentHTML
18:	Add click events to a list