Event Delegation in JavaScript Explained — How, Why, and When to Use It

// Set up a simple nested structure to watch bubbling in action
const container = document.querySelector('#container');  // outer div
const button    = document.querySelector('#action-btn'); // inner button

// Listener on the PARENT container
container.addEventListener('click', function(event) {
  // event.target  → the element the user actually clicked
  // event.currentTarget → the element this listener is attached to (container)
  console.log('Target (who was clicked):',      event.target.id);
  console.log('CurrentTarget (who is listening):', event.currentTarget.id);
});

// Listener on the CHILD button — fires FIRST because bubbling goes outward
button.addEventListener('click', function(event) {
  console.log('Button listener fired — id:', event.target.id);
});

// When the user clicks the button, both listeners fire.
// The button listener runs first, then the event bubbles to the container.

// --- HTML structure assumed:
// <ul id="task-list"></ul>
// <button id="add-task-btn">Add Task</button>

const taskList   = document.querySelector('#task-list');
const addButton  = document.querySelector('#add-task-btn');
let   taskCount  = 1;

// ─── ADD TASKS DYNAMICALLY ────────────────────────────────────────────
addButton.addEventListener('click', function() {
  const listItem = document.createElement('li');
  listItem.dataset.taskId = taskCount; // store ID on the element itself

  // Each item has a label and a delete button inside it
  listItem.innerHTML = `
    <span class="task-label">Task #${taskCount}</span>
    <button class="delete-btn" aria-label="Delete task ${taskCount}">✕</button>
  `;

  taskList.appendChild(listItem);
  taskCount++;
});

// ─── ONE DELEGATED LISTENER FOR ALL CURRENT AND FUTURE ITEMS ─────────
taskList.addEventListener('click', function(event) {
  // closest() walks UP from the clicked element (even if it was the icon
  // inside the button) until it finds a .delete-btn, or returns null
  const deleteButton = event.target.closest('.delete-btn');

  if (deleteButton) {
    // closest() on the button itself to find its parent <li>
    const taskItem = deleteButton.closest('li');
    const taskId   = taskItem.dataset.taskId;

    console.log(`Deleting task with ID: ${taskId}`);
    taskItem.remove(); // cleanly removes the element — no listener cleanup needed
    return;
  }

  // Handle clicks on the task label (e.g. mark complete)
  const taskLabel = event.target.closest('.task-label');
  if (taskLabel) {
    const taskItem = taskLabel.closest('li');
    taskItem.classList.toggle('completed');
    console.log(`Toggled completed on task ID: ${taskItem.dataset.taskId}`);
  }
});

// ─── WHAT JUST HAPPENED? ──────────────────────────────────────────────
// We have ZERO listeners on individual <li> elements.
// No matter how many tasks are added, we always have exactly 2 listeners
// total: one on addButton, one on taskList.
// Tasks added 5 minutes from now are automatically handled.

// --- HTML structure assumed:
// <table>
//   <tbody id="user-table-body">
//     <tr data-user-id="101">
//       <td>Alice Johnson</td>
//       <td>
//         <button class="table-action" data-action="edit"   data-user-id="101">Edit</button>
//         <button class="table-action" data-action="delete" data-user-id="101">Delete</button>
//       </td>
//     </tr>
//     ... more rows
//   </tbody>
// </table>

const tableBody = document.querySelector('#user-table-body');

// ─── ACTION HANDLERS — pure functions, easy to test ───────────────────
function handleEditUser(userId) {
  console.log(`Opening edit modal for user ID: ${userId}`);
  // In a real app: open a modal, fetch user data, populate form, etc.
}

function handleDeleteUser(userId) {
  console.log(`Requesting delete confirmation for user ID: ${userId}`);
  // In a real app: show a confirmation dialog, then call your API
}

// ─── THE SINGLE DELEGATED LISTENER ────────────────────────────────────
tableBody.addEventListener('click', function(event) {
  // Find the action button, even if user clicked text inside it
  const actionButton = event.target.closest('.table-action');

  // Guard clause — if click wasn't on an action button, do nothing
  if (!actionButton) return;

  // Read context directly from data attributes — no DOM traversal needed
  const action = actionButton.dataset.action;  // 'edit' or 'delete'
  const userId = actionButton.dataset.userId;  // e.g. '101'

  // Route to the correct handler using a lookup object
  // This scales better than a long if/else chain as actions grow
  const actionHandlers = {
    edit:   () => handleEditUser(userId),
    delete: () => handleDeleteUser(userId),
  };

  const handler = actionHandlers[action];

  if (handler) {
    handler();
  } else {
    console.warn(`Unrecognised table action: "${action}"`);
  }
});

// ─── WHY THIS IS BETTER ───────────────────────────────────────────────
// 1. Adding 50 more rows to the table? Zero new listeners.
// 2. Adding a new action type (e.g. 'view')? Add one entry to actionHandlers.
// 3. Want to reload rows via AJAX? The listener still works — no re-binding.

// ─── THE BROKEN APPROACH — focus does not bubble ──────────────────────
const brokenForm = document.querySelector('#search-form');

brokenForm.addEventListener('focus', function(event) {
  // This will NEVER fire when an input inside the form is focused
  // because focus doesn't bubble — it stops at the input element
  console.log('This line never runs:', event.target);
});

// ─── THE CORRECT APPROACH — focusin DOES bubble ───────────────────────
const workingForm = document.querySelector('#contact-form');

workingForm.addEventListener('focusin', function(event) {
  // Now this fires whenever ANY input inside the form gains focus
  const focusedInput = event.target;

  // Only act on actual input elements, ignore focus on the form itself
  if (focusedInput.matches('input, textarea, select')) {
    focusedInput.classList.add('field--active'); // highlight the focused field
    console.log(`Field focused: ${focusedInput.name}`);
  }
});

workingForm.addEventListener('focusout', function(event) {
  const blurredInput = event.target;

  if (blurredInput.matches('input, textarea, select')) {
    blurredInput.classList.remove('field--active');

    // Good place to trigger inline validation after the user leaves a field
    if (blurredInput.value.trim() === '') {
      blurredInput.classList.add('field--error');
      console.log(`Validation failed: ${blurredInput.name} is empty`);
    } else {
      blurredInput.classList.remove('field--error');
    }
  }
});

// ─── EVENTS THAT DO NOT BUBBLE — memorise these ───────────────────────
// focus    → use focusin  instead
// blur     → use focusout instead
// mouseenter → use mouseover instead (mouseover bubbles)
// mouseleave → use mouseout  instead (mouseout  bubbles)

// ─── WHEN DIRECT LISTENERS ARE FINE ───────────────────────────────────
// Static navigation with 4 links — no dynamic changes
const navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(link => {
  link.addEventListener('click', handleNavClick);
});
// Simple, readable, no delegation overhead. 4 listeners vs 1 — difference is ~0.01ms.

// ─── WHEN DELEGATION IS BETTER ────────────────────────────────────────
// 500 dynamic rows updated every 30 seconds
const table = document.querySelector('#data-table');
table.addEventListener('click', function(e) {
  const row = e.target.closest('tr');
  if (!row) return;
  // ... handle row click
});
// One listener handles all rows, including future ones. Memory constant.

// ─── MEASURE THE OVERHEAD ─────────────────────────────────────────────
const parent = document.querySelector('#list');
const start = performance.now();
for (let i = 0; i < 1000; i++) {
  // Force a synthetic click to measure selector overhead
  const event = new MouseEvent('click', { bubbles: true });
  parent.dispatchEvent(event);
}
const end = performance.now();
console.log(`1000 delegated clicks took ${(end - start).toFixed(2)}ms`);