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:

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:

addEventListener()

Basic syntax:

element.addEventListener("event", function);

Example:

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:

<button id="btn">Click Me</button>

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:

<h1 id="title">Hello World</h1>

<button id="btn">Change Text</button>

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:

const box = document.querySelector(".box");

box.addEventListener("mouseenter", function () {
    console.log("Mouse entered!");
});

And:

box.addEventListener("mouseleave", function () {
    console.log("Mouse left!");
});

---

Keyboard Events

JavaScript can detect keyboard input.

Common keyboard events include:

• keydown

• keyup

Example:

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.

document.addEventListener("keydown", function (event) {
    console.log(event.key);
});

If I press:

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:

<input id="username" type="text">

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.

<form id="form">
    <input type="text">
    <button type="submit">Submit</button>
</form>

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.

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.

button.addEventListener("click", () => {

    console.log("Button clicked!");

});

You'll see this syntax frequently in modern JavaScript.

---

Removing Event Listeners

JavaScript also provides:

removeEventListener()

Example:

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:

<button id="themeBtn">Toggle Theme</button>

JavaScript:

const themeBtn = document.querySelector("#themeBtn");

themeBtn.addEventListener("click", function () {

    document.body.classList.toggle("dark");

});

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.