JavaScript Events and Event Delegation

An event is something that happens on the page: a click, a key press, a form submission, the page finishing loading. JavaScript reacts by attaching listeners – functions that run when the event fires. Understanding how events travel through the DOM leads to event delegation, a technique that keeps code fast and simple – and a classic interview question.

Listening for events

<button id="like-btn" type="button">👍 Like <span class="count">0</span></button>

const button = document.querySelector("#like-btn");
let likes = 0;

button.addEventListener("click", (event) => {
  likes++;
  button.querySelector(".count").textContent = likes;
  button.classList.toggle("liked", likes > 0);
  console.log(event.type, event.target.tagName, event.currentTarget.id);
});

Each click updates the count. Clicking exactly on the number logs click SPAN like-btn: event.target is the element actually clicked, while event.currentTarget is the element the listener is attached to.

Bubbling and capturing

When you click an element, the event doesn't only fire there. It travels down from window to the target (capturing), fires on the target, then travels back up through every ancestor (bubbling). Listeners run during bubbling by default.

document.querySelector("ul").addEventListener("click", () => console.log("ul (bubble)"));
document.querySelector("ul").addEventListener("click", () => console.log("ul (capture)"), { capture: true });
document.querySelector("li").addEventListener("click", () => console.log("li"));
document.querySelector("button").addEventListener("click", () => console.log("button"));
// Clicking the button logs: ul (capture), button, li, ul (bubble)

event.stopPropagation() stops the event travelling further. Use it sparingly – other code (analytics, "click outside to close" menus) often relies on events bubbling.

Event delegation

Instead of attaching a listener to every item, attach one listener to their common parent and check event.target. It works for items added later, too:

<ul id="todo-list">
  <li data-id="1"><span>Revise closures</span> <button class="done">✓</button> <button class="delete">✕</button></li>
  <li data-id="2"><span>Practise SQL joins</span> <button class="done">✓</button> <button class="delete">✕</button></li>
</ul>

const list = document.querySelector("#todo-list");

list.addEventListener("click", (event) => {
  const button = event.target.closest("button");      // the clicked button, if any
  if (!button || !list.contains(button)) return;

  const item = button.closest("li");
  const id = item.dataset.id;

  if (button.matches(".delete")) {
    item.remove();
    console.log("Deleted", id);
  } else if (button.matches(".done")) {
    item.classList.toggle("completed");
    console.log("Toggled", id);
  }
});

preventDefault

Some events have a built-in browser action: a link navigates, a form submits and reloads the page, a key types a character. event.preventDefault() cancels that action so your code can take over:

document.querySelector("#search-form").addEventListener("submit", async (event) => {
  event.preventDefault();                           // no page reload
  const query = new FormData(event.currentTarget).get("q").trim();
  if (query) await showResults(query);
});

document.querySelector(".external-warning").addEventListener("click", (event) => {
  if (!confirm("You are leaving LearnFrenzy. Continue?")) event.preventDefault();
});

Keyboard events

document.addEventListener("keydown", (event) => {
  // Ctrl+K or Cmd+K opens search
  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "k") {
    event.preventDefault();
    document.querySelector("#search").focus();
  }
  if (event.key === "Escape") closeModal();
});

Use event.key ("Enter", "Escape", "ArrowUp", "a") – the older keyCode is deprecated.

Listener options and cleanup

// Runs only once, then removes itself
button.addEventListener("click", showWelcomeTour, { once: true });

// passive: promise not to call preventDefault – lets the browser scroll smoothly
window.addEventListener("scroll", updateProgressBar, { passive: true });

// Remove a listener: pass the SAME function reference
function onResize() { console.log(window.innerWidth); }
window.addEventListener("resize", onResize);
window.removeEventListener("resize", onResize);

// Remove many listeners at once with an AbortController
const controller = new AbortController();
window.addEventListener("resize", onResize, { signal: controller.signal });
document.addEventListener("keydown", onKey, { signal: controller.signal });
controller.abort();          // both removed – handy when a component is destroyed

Practice

Summary