Event Delegation: The Most Critical Pattern

Not every situation needs delegation. Here's when to avoid it:

Don't delegate when:

1. Non-bubbling events — focus/blur, mouseenter/mouseleave, scroll — delegation simply won't work.

2. Very different handlers per child — if each button does something completely unrelated, delegation adds complexity for no benefit.

3. Need stopPropagation per-child — if you need to stop bubbling at specific children, delegation works against you.

4. Parent is document/body on a huge page — your handler runs on every click on the entire page.

Don't delegate too high: document.addEventListener("click", ...) catches ALL clicks — navigation, modals, unrelated UI. Wasteful and potentially buggy.

Don't delegate too low: Immediate parent with 1 child — no benefit, just add the listener on the child directly.

Sweet spot: The closest common ancestor of all elements that need the same handler.

// ❌ Don't delegate on document — too broad
document.addEventListener("click", (e) => {
  // This runs on EVERY click on the ENTIRE page
  // Navigation clicks, modal clicks, unrelated UI clicks
  // Even clicks on elements that don't need handling
  // Wasteful and potentially buggy
});

// ✅ Delegate on the specific container
document.getElementById("todo-list").addEventListener("click", (e) => {
  const item = e.target.closest(".todo-item");
  if (item && list.contains(item)) {
    // Only fires for clicks INSIDE the todo list
    handleTodoClick(item);
  }
});

// ✅ Form delegation — the right container
const form = document.getElementById("signup-form");
form.addEventListener("click", (e) => {
  const submitBtn = e.target.closest("button[type=submit]");
  if (submitBtn && form.contains(submitBtn)) {
    e.preventDefault();
    validateAndSubmit(form);
  }
});

// ✅ Keyboard delegation
const searchBox = document.getElementById("search-container");
searchBox.addEventListener("keydown", (e) => {
  const input = e.target.closest("input[type=search]");
  if (input && e.key === "Enter") {
    performSearch(input.value);
  }
});