DOM Events

Table of Contents +

In the previous lesson, we learned how to remove elements from the page. Now let’s make the page react to the user with DOM events.

🖱️ What are DOM Events?

An event is something that happens on the page, usually because of the user. A click on a button, typing in a box, and submitting a form are all events. JavaScript lets you run code in response to these events.

You listen for an event with addEventListener. It takes the name of the event and a callback function to run when the event happens.

const button = document.querySelector("#myButton");

button.addEventListener("click", function () {
  console.log("The button was clicked!");
});

Let’s walk through what each line does:

document.querySelector("#myButton") grabs the button with the id myButton and stores it in button.
button.addEventListener("click", ...) tells the browser to watch that button for click events.
The function () { ... } is the callback. The browser runs it each time the button is clicked, and here it logs a message to the console.

The callback runs every time the event happens. This connects back to callback functions: you pass the function to addEventListener, and the browser calls it for you at the right moment.

📋 Common Events

There are many event types. These are the ones you will use most often.

Event	When it fires
`click`	The user clicks an element
`input`	The value of a text field changes
`submit`	A form is submitted
`mouseover`	The pointer moves onto an element
`keydown`	A key is pressed down

👆 A Simple Click Example

This button changes its own text when it is clicked.

const button = document.querySelector("#greetButton");

button.addEventListener("click", function () {
  button.textContent = "Thanks for clicking!";
});

Here is what happens line by line:

document.querySelector("#greetButton") finds the button and saves it in button.
button.addEventListener("click", ...) listens for clicks on that button.
Inside the callback, button.textContent = "Thanks for clicking!" replaces the button’s text with a new message.

The callback runs on every click. Inside it, you can change the page however you like.

📦 The Event Object

When an event fires, the browser passes an event object to your callback. It holds details about what happened. The most useful property is event.target, the element the event came from.

const input = document.querySelector("#nameField");

input.addEventListener("input", function (event) {
  console.log(event.target.value); // what the user has typed so far
});

Let’s break this down:

document.querySelector("#nameField") selects the text field and stores it in input.
input.addEventListener("input", ...) listens for the input event, which fires on every keystroke.
The callback now accepts a parameter named event, the event object the browser hands in.
event.target is the field that fired the event, and event.target.value reads the text the user has typed so far.

For forms, the event object also gives you event.preventDefault(). By default, submitting a form reloads the page. Calling preventDefault stops that so you can handle the data with JavaScript.

const form = document.querySelector("#signupForm");

form.addEventListener("submit", function (event) {
  event.preventDefault(); // stop the page from reloading

  const email = document.querySelector("#email").value;
  console.log("Signing up:", email);
});

Here is what each line does:

document.querySelector("#signupForm") selects the form and stores it in form.
form.addEventListener("submit", ...) listens for the submit event, which fires when the user submits the form.
event.preventDefault() cancels the default reload so the rest of the callback can run.
document.querySelector("#email").value reads the email field’s value, and the last line logs it to the console.

event.target is the source

event.target always points to the element that triggered the event. It saves you from looking the element up again inside the callback.

⚠️ Common Mistakes to Avoid

Mistake	Problem	Solution
Calling the handler instead of passing it	`addEventListener("click", handler())` runs it immediately	Pass the name only: `addEventListener("click", handler)`
Forgetting `preventDefault` on a form	The page reloads and your code never finishes	Call `event.preventDefault()` first in the submit handler
Attaching a listener before the element exists	`querySelector` returns `null` and the listener fails	Run the code after the element has loaded

Pass, don't call

Write fn, not fn(). Adding parentheses calls the function right away and hands its return value to addEventListener instead of the function itself.

🔧 Try It Yourself!

Add a button to a page and use addEventListener to change its text on click.
Add a text input and log event.target.value on every input event.
Build a small form and stop its reload with event.preventDefault() in a submit handler.
Read a field’s value inside the submit handler and print it to the console.

🧩 What You’ve Learned

✅ Events are user actions like click, input, submit, mouseover, and keydown
✅ element.addEventListener(type, callback) runs your callback when the event fires
✅ The callback receives an event object with details about what happened
✅ event.target is the element that triggered the event
✅ event.preventDefault() stops a form from reloading the page

🚀 What’s Next?

Now that your pages can respond to the user, we will learn a cleaner way to build strings. Let’s continue to Template Literals.

Previous Removing DOM Elements Next JavaScript Template Literals

Share & Connect

Share on LinkedIn