How an Event Is Dispatched

• The browser hit-tests the input coordinates against the painted, composited result — not against the DOM tree order. Stacking contexts, z-index, transforms and pointer-events all take part, which is why the visually topmost thing is the thing that gets the event (Pointer Events).
• It then builds the propagation path: the chain of nodes from that target up through its ancestors to the Document and the Window. This happens once, at dispatch, and is frozen. Mutating the DOM inside a listener does not rewrite the path already in flight.
• It walks the path in three phases. Capture runs from Window down to the target's parent, firing only listeners registered with capture: true. At target fires the target's own listeners, capture and bubble alike, in registration order. Bubble runs from the parent back up to Window, firing non-capture listeners.
• event.target is the node the event was dispatched at and never changes during the walk. event.currentTarget is the node whose listener is executing right now, and changes at every step. event.eventPhase tells you which of the three you are in.
• Dispatch is synchronous. dispatchEvent() runs every listener on the path to completion and returns before the next line — all of it on the one thread that also owns rendering (What the Main Thread Owns).
• Shadow boundaries retarget. An event that crosses out of a shadow root reports the host element as target to outside listeners, so the internals stay encapsulated; composedPath() returns the real path if the event is composed (Shadow DOM and the Composed Tree).
• After the walk, and only if nothing cancelled it, the browser runs the default action — navigate the link, submit the form, toggle the checkbox, scroll the page (preventDefault vs stopPropagation).

1const trace = (label: string) => (e: Event) => {
2  const phase = ['NONE', 'CAPTURING', 'AT_TARGET', 'BUBBLING'][e.eventPhase]
3  console.log(label, phase, {
4    target: (e.target as Element).localName,        // never changes
5    currentTarget: (e.currentTarget as Element | null)?.localName ?? 'window',
6    composed: e.composed,                            // can it leave a shadow root?
7    isTrusted: e.isTrusted,                          // user-generated, or dispatchEvent()?
8  })
9}
10 
11// capture: true means "see it on the way down"
12document.addEventListener('click', trace('document'), { capture: true })
13form.addEventListener('click', trace('form'))
14button.addEventListener('click', trace('button'))
15 
16// One signal removes the whole group — far harder to leak than
17// matching every addEventListener with a removeEventListener.
18const ac = new AbortController()
19button.addEventListener('click', onSave, { signal: ac.signal })
20// later: ac.abort()

click on <span> inside <button type="submit"> inside <form>

document  CAPTURING  target: span   currentTarget: #document
button    AT_TARGET  target: span   currentTarget: button
form      BUBBLING   target: span   currentTarget: form
→ default action: submit the form

Read it twice:
  target        is the span, in every single line
  currentTarget is the node whose listener is running
  the button listener fires AT_TARGET, not "bubbling"

• Read event.currentTarget when you mean "the element I attached to" and event.target when you mean "the deepest thing the user actually hit". Nearly every target/currentTarget bug is this sentence, unwritten.
• Use closest() to walk from the target back to the element you care about, rather than assuming the target is it (Event Delegation).
• Register on the capture phase only when you genuinely need to see the event before descendants — an outside-click dismisser, a global shortcut guard, an instrumentation hook. Capture is a strong claim and it makes ordering harder to reason about.
• Prefer the bubbling twin for events that do not bubble: focusin/focusout instead of focus/blur, or register focus with capture: true if you must.
• Do not encode ordering assumptions between listeners on different nodes. If two things must happen in order, that is one handler calling two functions, not two handlers hoping.
• Use AbortController with a single signal to remove a group of listeners at once — it is far harder to leak than matching every addEventListener with a hand-written removeEventListener.