Event delegation.
One listener for many.

How it works:

1. One listener on .list, not on each .item.

2. User clicks something inside .list.
   → The event fires on the actual clicked element
     (could be the .item itself, or a child).

3. The event bubbles up to .list.

4. The listener runs. event.target is the
   actual clicked element.

5. event.target.closest('.item') walks up
   from the target to find the nearest
   .item ancestor (including the target itself).

6. If found, we know an item was clicked.
   If null, the click was elsewhere in .list
   (a header, a gap, etc.).

7. Act on the item.

The key line:

  const item = event.target.closest('.item');

Without closest, you'd need to check at each level:

  let el = event.target;
  while (el && !el.classList.contains('item')) {
    el = el.parentElement;
  }

That's exactly what closest does — but built in,
and faster.

⚠️ Always check for null:
   closest returns null if no ancestor matches.
   The click might have been on the container itself,
   not on any item.

   if (!item) return;   // or handle the outside-click case

⚠️ closest walks UP. It includes the element itself.
   If event.target IS the .item, closest returns it.

⚠️ closest is case-sensitive.
   .closest('.Item') will not match .item.
   Use consistent class names.

The difference:

event.target:
  → The element that triggered the event
  → The actual clicked element
  → Can be any descendant of the listener

event.currentTarget:
  → The element the listener is attached to
  → Always the parent in delegation
  → Equal to `this` in the handler (for non-arrow functions)

In delegation, you want:
  event.target — to know what was clicked
  closest() — to find the semantic element

You rarely use currentTarget in delegation.
You attach the listener to the container,
and you already know what container that is.

But currentTarget is useful:

✅ In code that might be attached to different
   containers — you can always find the parent.

✅ When you're not sure where the listener is
   attached (a helper function that accepts
   a listener).

✅ In event handler libraries, where the
   listener is attached inside the library.

For a plain delegation handler:

list.addEventListener('click', (event) => {
  const item = event.target.closest('.item');
  if (!item) return;
  // item is the actual clicked item
});

You don't need currentTarget.

⚠️ `this` in the handler:
   For regular functions, `this` === currentTarget.
   For arrow functions, `this` is the outer scope.
   Since delegation handlers are usually arrow
   functions (to preserve context), use
   event.currentTarget, not `this`.

The rule: target = what fired. currentTarget = where the listener is.

The bubbling rule:

An event bubbles if it has bubbles: true in its spec.
Most UI events do. A few don't.

Bubbling events (delegation works):

  Mouse:
    ✅ click, dblclick
    ✅ mousedown, mouseup, mousemove
    ✅ contextmenu (right-click)
    ✅ mouseover, mouseout (the bubbling versions)
    ❌ mouseenter, mouseleave (the non-bubbling versions)

  Keyboard:
    ✅ keydown, keyup, keypress

  Form:
    ✅ input, change, submit, reset
    ✅ focusin, focusout (bubbling)
    ❌ focus, blur (non-bubbling)

  Touch / Pointer:
    ✅ touchstart, touchend, touchmove
    ✅ pointerdown, pointerup, pointermove

  Other:
    ❌ scroll (doesn't bubble)
    ❌ resize (window only)
    ❌ load, unload (element-specific)

The pairs to know:
  focus / blur         → don't bubble
  focusin / focusout   → do bubble
  mouseenter / mouseleave → don't bubble
  mouseover / mouseout → do bubble

The mental model:
  focus/blur fire when the element itself gains
  or loses focus. They don't bubble because
  focus is element-specific.
  focusin/focusout fire when the element OR
  a descendant gains or loses focus. They bubble.

  The same logic for mouseenter/mouseover:
  mouseenter fires only when the mouse enters
  the element itself (not children).
  mouseover fires when entering the element or
  any child, so it can bubble.

For scroll: there's no bubbling equivalent.
Scroll events fire on the scrolling element.
To handle them from a parent, use capture phase
(third argument true), or attach directly.

⚠️ Capture phase events fire in the CAPTURE order
   (top-down), before the target.
   Not the same as delegation (which relies on
   bubble order, bottom-up).
   Use capture only when you must.