Event Delegation

What delegation pattern does this code demonstrate?

const grid = document.querySelector('.grid');
grid.addEventListener('click', e => {
  const cell = e.target.closest('.cell');
  if (!cell) return;
  
  const row = cell.closest('tr');
  const rowIndex = Array.from(row.parentElement.children).indexOf(row);
  const colIndex = Array.from(row.children).indexOf(cell);
  
  handleCellClick(rowIndex, colIndex, cell);
});

Basic event bubbling
Simple event delegation
Contextual information gathering
This code demonstrates gathering contextual information during event delegation. Instead of just handling the event, it uses DOM traversal to collect relevant context (row and column indices) about where the event occurred. This pattern is powerful for: 1) Handling structured data like tables or grids, 2) Maintaining position awareness in complex layouts, 3) Providing rich context to event handlers, 4) Implementing grid-based interactions efficiently. The delegation approach combined with context gathering makes complex interactions manageable.
Event propagation control

Next Question (5/20)