Event Handling

Event handling means writing code that responds to events.

An event handler is a function that runs when a specific event happens.

A Basic Handler

1

<button id="like-button">Like</button>

1
2
3
4
5
6
7

const button = document.querySelector("#like-button");

function handleLikeClick() {
  console.log("Liked");
}

button.addEventListener("click", handleLikeClick);

The handler function is handleLikeClick.

The browser calls it when the button is clicked.

Handler Functions Receive an Event Object

Most handlers receive an event object as their first argument.

1
2
3
4

button.addEventListener("click", (event) => {
  console.log(event.type);
  console.log(event.target);
});

The event object contains information about what happened.

Common properties:

target and currentTarget

These two properties are easy to confuse.

event.target is where the event originally happened.

event.currentTarget is the element that owns the listener currently running.

1
2
3

<button id="save-button">
  <span>Save</span>
</button>

1
2
3
4
5
6

const button = document.querySelector("#save-button");

button.addEventListener("click", (event) => {
  console.log(event.target); // Could be the span
  console.log(event.currentTarget); // The button
});

If the user clicks the text inside the button, target may be the span, while currentTarget is the button.

Named Handlers

Inline arrow functions are fine for small behavior.

For important behavior, named functions are often easier to read and remove later.

1
2
3
4
5
6

function handleSaveClick(event) {
  event.currentTarget.disabled = true;
  console.log("Saving...");
}

saveButton.addEventListener("click", handleSaveClick);

Named handlers also make stack traces easier to understand when debugging.

Reading Values in Handlers

Handlers often read values from form fields.

1
2
3
4
5
6
7
8

const form = document.querySelector("#profile-form");
const nameInput = document.querySelector("#name");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  console.log(nameInput.value);
});

The value is read when the event happens, not when the listener is registered.

Updating the DOM in Handlers

Handlers commonly update classes, text, attributes, or form state.

1
2
3
4
5
6

const toggle = document.querySelector("#toggle-details");
const details = document.querySelector("#details");

toggle.addEventListener("click", () => {
  details.hidden = !details.hidden;
});

This is the basic pattern behind tabs, accordions, menus, modals, and many other UI components.

Avoid Inline HTML Handlers

You may see code like this:

1

<button onclick="saveUser()">Save</button>

This works, but it mixes HTML with JavaScript behavior.

Prefer this:

1
2
3

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

button.addEventListener("click", saveUser);

Keeping behavior in JavaScript makes code easier to organize, test, and update.

Handling Missing Elements

If a selector does not match anything, it returns null.

1
2
3
4
5

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

if (button) {
  button.addEventListener("click", handleDelete);
}

In small exercises, you may know the element always exists. In larger pages, checking can prevent errors when a script is shared across pages.

Common Mistakes

Using the wrong event:

1

input.addEventListener("click", validateInput);

For live input validation, input is usually better than click.

Forgetting the event parameter:

1
2
3

form.addEventListener("submit", () => {
  event.preventDefault(); // Relies on a global event object and is unreliable
});

Use the parameter explicitly:

1
2
3

form.addEventListener("submit", (event) => {
  event.preventDefault();
});

Summary

Event handling is the process of registering functions that respond to browser events.

Handlers can inspect the event object, read user input, update the DOM, and coordinate interactive behavior.