JavaScript Event Listeners: Responding to User Actions

Web pages come alive when they respond to what users do. Every click, keypress, and form submission is an event in JavaScript. Event listeners let you run code when these events happen. They’re fundamental to every interactive web app.

Adding an Event Listener

The addEventListener method attaches a function to an element that runs when an event occurs:

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

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

// Arrow function shorthand
button.addEventListener("click", () => {
  console.log("Button clicked!");
});

The first argument is the event type, the second is the callback function to run.

The Event Object

Every event handler receives an event object with information about what happened:

document.addEventListener("keydown", (event) => {
  console.log(event.key);        // Which key was pressed
  console.log(event.ctrlKey);    // Was Ctrl held?
  event.preventDefault();        // Stop default browser behaviour
});

const form = document.querySelector("form");
form.addEventListener("submit", (event) => {
  event.preventDefault();        // Stop page from reloading
  const data = new FormData(event.target);
  console.log(data.get("email"));
});

event.preventDefault() is essential for forms — without it, the page reloads on submit.

Common Event Types

element.addEventListener("click", handler);       // Mouse click
element.addEventListener("mouseover", handler);   // Mouse enters element
element.addEventListener("input", handler);       // Input value changes
element.addEventListener("change", handler);      // Input loses focus with change
element.addEventListener("keydown", handler);     // Key pressed
window.addEventListener("resize", handler);       // Window resized
window.addEventListener("load", handler);         // Page fully loaded

Event Delegation

Instead of adding listeners to every child element, add one to the parent:

const list = document.querySelector("ul");

list.addEventListener("click", (event) => {
  if (event.target.tagName === "LI") {
    event.target.classList.toggle("done");
  }
});

This is more efficient and works for dynamically added elements too.

Conclusion

JavaScript event listeners are the foundation of user interaction on the web. Start with click and submit events, learn to use the event object, and get comfortable with preventDefault(). Once you understand delegation, you’ll write much more efficient event handling code.

Read next: JavaScript DOM Manipulation

External resource: MDN — EventTarget.addEventListener