Events and Event Handling

Events are how the browser tells your JavaScript that something happened — a click, a keypress, a page load, a form submission, a network response. Almost all interactivity on the web is built by listening for events and reacting to them.

Understanding not just how to attach a listener, but how events travel through the DOM (capturing and bubbling), unlocks powerful patterns like event delegation that make code both simpler and more efficient.

Why it matters

A web page does nothing until the user acts: clicks, types, scrolls, submits. Events are how code responds. Event delegation, where one listener on a parent handles all its children, is how lists of any length are handled efficiently, and how events travel through the page is a standard interview question.

addEventListener and the Event Object

element.addEventListener('click', handler) registers a function to run whenever that event fires on that element. Unlike the older onclick = handler style, addEventListener allows multiple listeners on the same event without overwriting each other, and it accepts an options object ({ once: true, capture: true, passive: true }). Every handler receives an event object describing what happened — event.target (the actual element that triggered it), event.type, event.preventDefault() (stops the default browser action, like following a link), and event.stopPropagation() (stops the event from continuing to travel).

Bubbling and Capturing

When an event fires on an element, it doesn't just affect that element — it travels through the DOM tree in two phases. The capturing phase goes from the document down to the target element; the bubbling phase then goes back up from the target to the document. By default, addEventListener listens during the bubbling phase; passing { capture: true } listens during capturing instead. This is why a click on a button inside a div also triggers click listeners on that div and on document, unless stopPropagation() is called.

Event Delegation

Instead of attaching a listener to every individual list item, button, or row (which is wasteful and doesn't work for elements added later), you attach a single listener to a stable parent element and use event.target to figure out which child was actually interacted with. This relies entirely on bubbling and is a standard performance and maintainability pattern for dynamic lists.

• Fewer listeners registered — better memory and setup performance for large lists.
• Automatically works for elements added to the DOM later, since the listener lives on the parent.
• Requires checking event.target (or event.target.closest(selector)) to identify the actual element clicked.

Examples

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

button.addEventListener('click', (event) => {
  event.preventDefault();
  console.log('Clicked element:', event.target.tagName);
  console.log('Event type:', event.type);
});

Clicked element: BUTTON
Event type: click

const list = document.querySelector('#task-list');

list.addEventListener('click', (event) => {
  const item = event.target.closest('.task');
  if (!item) return; // click was on the list itself, not an item

  item.classList.toggle('done');
  console.log('Toggled:', item.textContent);
});

// Even an item added later, e.g. list.appendChild(newLi),
// is handled correctly because the listener is on 'list', not each item.

Toggled: Buy milk and eggs

Exercise

Count clicks on the button and show the count in the paragraph as Clicked 1 times, Clicked 2 times and so on. Attach a single listener to main and act only when the element that was clicked is the button.

Expected result: clicking the button updates the paragraph; clicking the heading or the paragraph does nothing.

// The page contains: <main> with an <h1>, a <p> and a <button>

let count = 0;
const main = document.querySelector("main");
const output = document.querySelector("p");

// TODO: one click listener on main that reacts only to clicks on the button

// The page contains: <main> with an <h1>, a <p> and a <button>

let count = 0;
const main = document.querySelector("main");
const output = document.querySelector("p");

main.addEventListener("click", (event) => {
  if (!event.target.matches("button")) return;
  count += 1;
  output.textContent = "Clicked " + count + " times";
});

Quick quiz

Interview questions