What is event delegation, and what is the difference between event.target and event.currentTarget?

Direct answer

Event delegation attaches a listener to an ancestor and handles bubbled events from descendants; event.target is where the event originated, while event.currentTarget is the element whose listener is currently running.

Instead of adding one click listener to every row in a dynamic list, attach one listener to the list container and determine which descendant was activated. This works because suitable events bubble through ancestors.

In a delegated listener, event.currentTarget is normally the parent/container where the listener was registered. event.target may be the deepest clicked element—for example an icon inside a button rather than the button itself.

Use event.target.closest('[data-action]') when nested markup can exist inside the actionable element.
Verify the matched element belongs to the intended delegation container if DOM structure can cross boundaries.
Delegation naturally covers matching descendants added after the listener is registered, reducing listener-management work.