# JavaScript DOM Events – Making Webpages Interactive
Yesterday, I learned how the **DOM (Document Object Model)** allows JavaScript to select, create, modify, and remove HTML elements.
Today, I explored **DOM Events**.
Until now, I could change a webpage using JavaScript, but those changes happened directly through my code.
Events take this one step further.
They allow JavaScript to wait for something to happen — like a user clicking a button, typing into an input field, or submitting a form — and then respond to that action.
Let's dive in.
* * *
# What is an Event?
An **event** is an action or occurrence that happens in the browser.
Some common events include:
* Clicking a button
* Typing on the keyboard
* Moving the mouse
* Submitting a form
* Selecting an input
* Loading a webpage
JavaScript can listen for these events and execute code when they occur.
For example:
```javascript
const button = document.querySelector("#btn");
button.addEventListener("click", function () {
console.log("Button clicked!");
});
```
The function runs whenever the button is clicked.
* * *
# Event Listeners
The most common way to handle events is with:
```javascript
addEventListener()
```
Basic syntax:
```javascript
element.addEventListener("event", function);
```
Example:
```javascript
const button = document.querySelector("#btn");
button.addEventListener("click", function () {
alert("Hello!");
});
```
Here:
* `button` → Element we're watching
* `"click"` → Event we're listening for
* Function → Code that runs when the event occurs
* * *
# Click Events
The `click` event runs when the user clicks an element.
HTML:
```html
```
JavaScript:
```javascript
const button = document.querySelector("#btn");
button.addEventListener("click", function () {
console.log("You clicked the button!");
});
```
Click events are commonly used for:
* Buttons
* Menus
* Modals
* Dropdowns
* Like buttons
* Theme switches
* * *
# Changing the DOM With an Event
Events become even more powerful when combined with DOM manipulation.
HTML:
```html
Hello World
```
JavaScript:
```javascript
const title = document.querySelector("#title");
const button = document.querySelector("#btn");
button.addEventListener("click", function () {
title.textContent = "Hello JavaScript!";
});
```
Now the heading changes only when the user clicks the button.
This is real interaction between the **user, JavaScript, and DOM**.
* * *
# Mouse Events
JavaScript provides several mouse-related events.
Some common ones are:
* `click`
* `dblclick`
* `mousedown`
* `mouseup`
* `mouseenter`
* `mouseleave`
* `mousemove`
Example:
```javascript
const box = document.querySelector(".box");
box.addEventListener("mouseenter", function () {
console.log("Mouse entered!");
});
```
And:
```javascript
box.addEventListener("mouseleave", function () {
console.log("Mouse left!");
});
```
* * *
# Keyboard Events
JavaScript can detect keyboard input.
Common keyboard events include:
* `keydown`
* `keyup`
Example:
```javascript
document.addEventListener("keydown", function () {
console.log("A key was pressed!");
});
```
But we usually want to know **which key** was pressed.
That's where the event object becomes useful.
* * *
# The Event Object
When an event occurs, JavaScript provides information about that event through an **event object**.
```javascript
document.addEventListener("keydown", function (event) {
console.log(event.key);
});
```
If I press:
```text
Enter
```
JavaScript can detect that specific key.
The event object contains useful information about what happened.
* * *
# Input Events
The `input` event runs whenever the value of an input field changes.
HTML:
```html
```
JavaScript:
```javascript
const input = document.querySelector("#username");
input.addEventListener("input", function (event) {
console.log(event.target.value);
});
```
As the user types, JavaScript receives the current value.
This is useful for:
* Live search
* Form validation
* Character counters
* Real-time previews
* * *
# Form Submit Events
Forms generate a `submit` event.
```html
```
JavaScript:
```javascript
const form = document.querySelector("#form");
form.addEventListener("submit", function (event) {
console.log("Form submitted!");
});
```
However, submitting a form normally causes the browser to perform its default submission behavior.
Sometimes we want to stop that.
* * *
# preventDefault()
`preventDefault()` prevents the browser's default behavior for an event.
```javascript
form.addEventListener("submit", function (event) {
event.preventDefault();
console.log("Form handled with JavaScript!");
});
```
This is extremely common when working with forms in modern web applications.
* * *
# Event Handling With Arrow Functions
Event listeners can also use arrow functions.
```javascript
button.addEventListener("click", () => {
console.log("Button clicked!");
});
```
You'll see this syntax frequently in modern JavaScript.
* * *
# Removing Event Listeners
JavaScript also provides:
```javascript
removeEventListener()
```
Example:
```javascript
function greet() {
console.log("Hello!");
}
button.addEventListener("click", greet);
button.removeEventListener("click", greet);
```
To remove a listener, we need a reference to the same function that was originally added.
* * *
# Events + classList
One practical use of events is toggling CSS classes.
HTML:
```html
```
JavaScript:
```javascript
const themeBtn = document.querySelector("#themeBtn");
themeBtn.addEventListener("click", function () {
document.body.classList.toggle("dark");
});
```
CSS:
```css
.dark {
background-color: #111;
color: white;
}
```
Now every button click toggles dark mode.
This combines everything I've been learning:
**HTML + CSS + DOM + Events**
* * *
# Best Practices
✔ Prefer `addEventListener()` for handling events.
✔ Give event handler functions meaningful names when the logic becomes complex.
✔ Use the event object when you need information about the interaction.
✔ Use `preventDefault()` only when you intentionally want to override default browser behavior.
✔ Keep event handlers small and readable.
✔ Avoid mixing too much JavaScript directly into HTML attributes.
* * *
# My Biggest Takeaway
Today, JavaScript started feeling much more like the language behind real interactive websites.
The DOM allows me to **find and modify elements**, while events allow me to decide **when those modifications should happen**.
I can now make webpages respond to clicks, keyboard input, form submissions, and other user actions.
Combining **DOM manipulation with event listeners** opens the door to building features like dropdown menus, dark mode toggles, interactive forms, counters, modals, and many other UI components.