Event Delegation

Why check if e.target === this?

list.addEventListener('click', function(e) {
  if (e.target === this) return;
  const item = e.target.closest('li');
  if (!item) return;
  // Handle item click
});

To prevent event bubbling
To improve performance
To avoid handling clicks on the container itself
Checking if e.target === this prevents handling clicks that occur directly on the container element (list) rather than its children. This is useful because: 1) It distinguishes between clicks on items and clicks on empty spaces in the container, 2) It allows for different handling of container vs item clicks, 3) It prevents false positives in delegation handling, 4) It's particularly important for containers with spacing between items. This check complements the closest() check for complete click handling logic.
To stop event propagation

Next Question (15/20)