JavaScript HTML DOM Events

Events in JavaScript are actions that happen inside the HTML DOM when a user does something. When such events happen, we can use JavaScript to react to it.

Writing code in your website that reacts to the events makes your website highly interactive. We will see why in this and upcoming lessons.

Some Examples of Events in the DOM:

When a user clicks on something.
When the document is loaded.
When a user types into an input field in a form.
When a user presses a key in their keyboard.
When a user hovers their mouse pointer over an HTML element.

Listening to the above events and then performing some actions can make your website intuitive. Just let your imagination run wild 😎.

Note: In this lesson, we will only go through one or two examples from each event type. But don’t worry, as you can see in the left side menu, we have a separate chapter (JS DOM Events) to explain all of them in detail.

Note: Also check out our JavaScript 👉 Add and Delete Elements and 👉 Add or Change CSS Styles lesson.

HTML DOM Event Types

We have categorized some of the most loved and used DOM Events into five categories. They are as follows:

Window Events 🪟
Mouse Events 🖱
Keyboard Events ⌨
Form Events 📃
Drag Events 💪

Note: The Document Object Model (DOM) provides lots of events and you don’t need to learn every single one of them as there are so many. We have shortlisted some of the most important ones.

JavaScript Window Events 🪟

Window Events are actions that happen to the browser window when a user does something that affects the entire browser window. A window contains the entire DOM document.