DOM Event Flow and Delegation

A DOM event first travels from the outer ancestors toward its target, where capture listeners use { capture: true }. At the target, both capture and non-capture listeners run. If the event bubbles, it then travels back through the ancestors and runs their non-capture listeners. event.target identifies where the event was dispatched, while event.currentTarget is the object whose listener is running. Shadow DOM can retarget target across a boundary.

Propagation and browser behavior have separate controls. stopPropagation() keeps the event from reaching other objects on the path, but later listeners on the same object can still run. stopImmediatePropagation() stops those listeners as well. preventDefault() cancels a cancelable browser action, such as following a link, without stopping propagation.

Delegation uses that bubble path. Put one listener on the nearest stable container instead of one on every row or button. In the handler, first check that event.target is an Element, then use closest("[data-action]"). Ignore a missing match and confirm container.contains(match) before acting. That handles nested icons and matching children added later. It also reduces listener setup and cleanup, but requires an event that bubbles and has not been stopped below the container.