The Event Object — Target vs CurrentTarget, Propagation & Prevention

Technical Deep Dive & Specifications

1. event.target vs event.currentTarget

  +-----------------------------------------------------------------+
  |  <button id="card-btn">                       (currentTarget)   |
  |     <svg class="icon">...</svg>                                 |
  |     <span class="label">Delete Item</span>    (target clicked)  |
  |  </button>                                                      |
  +-----------------------------------------------------------------+

• event.target: The deepest, innermost element in the DOM tree where the interaction physically occurred. This value stays constant throughout the entire propagation path.
• event.currentTarget: The element to which the currently executing event listener was attached via addEventListener. This value changes dynamically as the event moves up and down the DOM tree. Inside standard functions, event.currentTarget === this.

2. Propagation Termination: stopPropagation() vs stopImmediatePropagation()

Element with 3 registered click listeners: [Listener A] [Listener B] [Listener C]

If Listener A calls e.stopPropagation():
  -> Listener A runs
  -> Listener B runs
  -> Listener C runs
  -> Event does NOT bubble up to Parent DOM nodes.

If Listener A calls e.stopImmediatePropagation():
  -> Listener A runs
  -> Listener B is CANCELLED (Never runs)
  -> Listener C is CANCELLED (Never runs)
  -> Event does NOT bubble up to Parent DOM nodes.

3. Preventing Default Actions: preventDefault() & defaultPrevented

• event.preventDefault(): Tells the browser not to execute the native user-agent action associated with this event (e.g., following an <a> link, submitting a <form>, checking a <checkbox>, scrolling via arrow keys).
• event.cancelable: Boolean indicating if the event can be cancelled. (e.g., scroll is NOT cancelable; click IS cancelable). Calling preventDefault() on a non-cancelable event has no effect.
• event.defaultPrevented: Boolean indicating whether any listener in the propagation pipeline has invoked preventDefault().

4. event.isTrusted — Security & Anti-Bot Verification

// User physically clicks the button:
button.addEventListener('click', (e) => {
  console.log(e.isTrusted); // true (Generated by physical hardware action)
});

// JavaScript script clicks the button:
button.click(); // or button.dispatchEvent(new MouseEvent('click'))
// Console logs: e.isTrusted === false (Synthetic / Script-generated)

• e.isTrusted === true: The event was generated by a genuine user hardware interaction (physical mouse click, keypress, touch gesture).
• e.isTrusted === false: The event was created or dispatched programmatically via element.click(), dispatchEvent(), or automated test runners.

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 50–57 (logEvent): Demonstrates how e.target reports the exact sub-element clicked (#btn-icon, #btn-label, or #btn-badge), while e.currentTarget always remains the element with the active listener (#action-btn or #outer-container).
• Lines 60–71 (Button Listener #1): If stopImmediatePropagation() is checked, it prevents Button Listener #2 on the same element from running and halts bubbling to #outer-container.
• Lines 74–76 (Button Listener #2): Fires if stopPropagation() is used, but is completely blocked if stopImmediatePropagation() is called.
• Lines 79–81 (Container Listener): Only receives the event if neither propagation stop method was invoked.

Expected Browser Render Output

• Clicking the red "NEW" badge without checkboxes produces:

[Button Listener #1] | target: <span id="btn-badge"> | currentTarget: <button id="action-btn"> | isTrusted: true
[Button Listener #2 (Sibling)] | target: <span id="btn-badge"> | currentTarget: <button id="action-btn"> | isTrusted: true
[Container Listener (Ancestor)] | target: <span id="btn-badge"> | currentTarget: <div id="outer-container"> | isTrusted: true