Event Delegation

What UI pattern does this delegation implement?

const table = document.querySelector('table');
let sortColumn = null;

table.addEventListener('click', e => {
  const th = e.target.closest('th[data-sort]');
  if (!th) return;
  
  const column = th.dataset.sort;
  const ascending = sortColumn === column;
  sortColumn = ascending ? null : column;
  
  sortTable(column, !ascending);
});

Basic click handling
Sortable table headers
This code implements a sortable table pattern using event delegation. Key features include: 1) Toggle sorting direction on repeated clicks, 2) State management through the sortColumn variable, 3) Declarative sort configuration using data attributes, 4) Efficient handling of all sortable columns with one listener, 5) Clean separation between event handling and sorting logic. This pattern is common in data tables and provides a good example of combining state management with event delegation.
Column selection
Data filtering

Next Question (13/20)