Event Delegation

Event delegation is a technique where you attach a single event listener to a parent element to handle events for all its children, leveraging event bubbling.

The Problem

<ul id="todo-list">
  <li>Item 1 <button class="delete">X</button></li>
  <li>Item 2 <button class="delete">X</button></li>
  <li>Item 3 <button class="delete">X</button></li>
</ul>

Without delegation:

// Need to add listener to EACH button
document.querySelectorAll('.delete').forEach(btn => {
  btn.addEventListener('click', (e) => {
    e.target.closest('li').remove();
  });
});

// Problem: dynamically added items won't have listeners!

The Solution

// Single listener on parent
document.getElementById('todo-list').addEventListener('click', (e) => {
  if (e.target.classList.contains('delete')) {
    e.target.closest('li').remove();
  }
});

// Now works for ALL current and future items!

How It Works

1. Event bubbles from child to parent
2. Parent listener catches the event
3. Check e.target to identify which child triggered it
4. Execute appropriate handler

Here are common delegation patterns and implementations.

Basic Delegation

function delegate(parent, eventType, selector, handler) {
  parent.addEventListener(eventType, (e) => {
    const target = e.target.closest(selector);
    if (target && parent.contains(target)) {
      handler.call(target, e, target);
    }
  });
}

// Usage
delegate(document.getElementById('list'), 'click', '.item', (e, item) => {
  console.log('Item clicked:', item.textContent);
});

Using closest()

// Find the closest matching ancestor
document.getElementById('table').addEventListener('click', (e) => {
  const row = e.target.closest('tr');
  const cell = e.target.closest('td');
  
  if (row) {
    console.log('Row clicked:', row.rowIndex);
  }
  
  if (cell) {
    console.log('Cell clicked:', cell.cellIndex);
  }
});

Multiple Event Types

function delegateMultiple(parent, handlers) {
  Object.entries(handlers).forEach(([eventType, config]) => {
    parent.addEventListener(eventType, (e) => {
      Object.entries(config).forEach(([selector, handler]) => {
        const target = e.target.closest(selector);
        if (target && parent.contains(target)) {
          handler.call(target, e, target);
        }
      });
    });
  });
}

// Usage
delegateMultiple(document.getElementById('form'), {
  click: {
    '.submit-btn': (e) => submitForm(),
    '.cancel-btn': (e) => cancelForm()
  },
  input: {
    'input[name]': (e) => validateField(e.target),
    'select': (e) => updateOptions(e.target)
  }
});

Data Attribute Pattern

// Use data attributes for event handlers
document.addEventListener('click', (e) => {
  const action = e.target.dataset.action;
  if (action) {
    actions[action](e);
  }
});

const actions = {
  delete: (e) => e.target.closest('.item').remove(),
  edit: (e) => editItem(e.target.closest('.item')),
  save: (e) => saveItem(e.target.closest('.item'))
};

// HTML
// <button data-action="delete">X</button>
// <button data-action="edit">Edit</button>

Event delegation has advantages and disadvantages to consider.

Benefits

1. Memory Efficiency

// Without delegation: 1000 items = 1000 listeners
const items = document.querySelectorAll('.item');
items.forEach(item => {
  item.addEventListener('click', handleClick);
});

// With delegation: 1000 items = 1 listener
document.querySelector('.list').addEventListener('click', (e) => {
  if (e.target.closest('.item')) {
    handleClick(e);
  }
});

2. Dynamic Content

// Delegation works for elements added after page load
function addItem(text) {
  const li = document.createElement('li');
  li.textContent = text;
  list.appendChild(li); // Automatically handled!
}

3. Cleaner Code

// Less setup code
// No need to re-bind listeners when DOM changes
// Single point of control

Tradeoffs

1. Indirect Target Identification

// Must check e.target, not rely on 'this'
list.addEventListener('click', (e) => {
  const item = e.target.closest('.item');
  if (!item) return;
  // 'this' is the list, not the item
});

2. Complexity with Deep Nesting

// May need complex selector logic
document.addEventListener('click', (e) => {
  const button = e.target.closest('button, [role="button"]');
  if (!button) return;
  
  const form = button.closest('form');
  if (!form) return;
  
  // Handle based on button type
});

3. Debugging Challenges

// Harder to trace which handler is called
// Solution: add data attributes for debugging
button.dataset.handler = 'delete';

Best Practices

// 1. Use specific selectors
document.addEventListener('click', (e) => {
  const item = e.target.closest('.list-item');
  if (!item || !list.contains(item)) return;
  // Handle item
});

// 2. Check parent containment
if (!parent.contains(e.target)) return;

// 3. Use data attributes for clarity
<button data-action="delete" data-id="123">Delete</button>