Predict the Output: 10 Event Delegation and DOM Event Flow Questions Every Front-End Developer Should Practise

In technical interviews for front-end engineering roles, interviewers routinely test candidates on browser runtime behavior, DOM architecture, and event handling. While many candidates know how to attach an event prop in a component library, interviewers often present standalone JavaScript snippets manipulating DOM nodes to evaluate whether you genuinely understand the browser's event dispatch pipeline.

These questions appear frequently in technical screenings, live debugging sessions, and core JavaScript technical rounds. Interviewers use them to assess:

1. Event Dispatch Phases: Traversal through capturing (CAPTURING_PHASE), at-target (AT_TARGET), and bubbling (BUBBLING_PHASE).
2. Target Resolution: The distinction between event.target (origin element clicked) and event.currentTarget (element executing the handler).
3. Propagation Control: How stopPropagation() differs from stopImmediatePropagation() and preventDefault().
4. Listener Options: Runtime behavior of { capture: true }, { once: true }, and { passive: true }.
5. Event Delegation Mechanics: Handling nested children with Element.prototype.closest(), and knowing which events bubble.

This article targets developers with 0–5 years of experience preparing for front-end technical rounds. Practise predicting the exact console output for each snippet before reviewing the step-by-step trace and interviewer commentary.

---

Question Index

---

Q1. Standard Event Bubbling: Target vs CurrentTarget

Difficulty: Junior
Target Concept: Event bubbling phase order and identifying event.target vs event.currentTarget.

Code Snippet

// Setup DOM structure:
// <div id="parent">
//   <button id="child">Click Me</button>
// </div>

const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', (e) => {
  console.log('Parent:', e.target.id, e.currentTarget.id);
});

child.addEventListener('click', (e) => {
  console.log('Child:', e.target.id, e.currentTarget.id);
});

// The user clicks directly on the child button:
child.click();

What is the exact console output?

Predicted Output

Child: child child
Parent: child parent

Step-by-Step Execution Trace

1. child.click() initiates synchronous DOM event dispatch from window down to #child and back up to window.
2. Capturing Phase: No capture listeners are registered (capture: false by default), so no callbacks execute during descent.
3. Target Phase (AT_TARGET): The event reaches #child. The click listener on child fires.
   • e.target is the origin element clicked (child).
   • e.currentTarget is the element whose listener is executing (child).
   • Logs: Child: child child.
4. Bubbling Phase (BUBBLING_PHASE): The event bubbles up to #parent. The click listener on parent fires.
   • e.target remains the origin element (child).
   • e.currentTarget is the listener host element (parent).
   • Logs: Parent: child parent.

Spoken Explanation & Common Mistakes

• Spoken Summary: "Because listeners are registered without capture flags, they execute in bubbling order—child first, then parent. Throughout propagation, event.target references the origin element clicked (child), while event.currentTarget references the element hosting the active listener."
• Common Mistake: Assuming event.target changes to #parent when the parent's listener executes, confusing target with currentTarget.

Q2. Capturing Phase Order vs Default Bubbling

Difficulty: Junior-Mid
Target Concept: How { capture: true } flips invocation sequence relative to bubbling listeners.

Code Snippet

// Setup DOM structure:
// <div id="outer">
//   <div id="inner">
//     <button id="btn">Action</button>
//   </div>
// </div>

const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
const btn = document.getElementById('btn');

outer.addEventListener('click', () => console.log('1: Outer Bubble'), false);
inner.addEventListener('click', () => console.log('2: Inner Capture'), true);
outer.addEventListener('click', () => console.log('3: Outer Capture'), true);
btn.addEventListener('click', () => console.log('4: Button Bubble'), false);
inner.addEventListener('click', () => console.log('5: Inner Bubble'), false);

// The user clicks the button:
btn.click();

What is the exact console output?

Predicted Output

3: Outer Capture
2: Inner Capture
4: Button Bubble
5: Inner Bubble
1: Outer Bubble

Step-by-Step Execution Trace

1. Event dispatch traverses three standard phases: Capturing (Phase 1), At-Target (Phase 2), and Bubbling (Phase 3).
2. Capturing Phase: Descends from root down towards #btn.
   • On #outer: Capture listener runs. Logs 3: Outer Capture.
   • On #inner: Capture listener runs. Logs 2: Inner Capture.
3. At-Target Phase: Reaches #btn.
   • Button listener runs. Logs 4: Button Bubble.
4. Bubbling Phase: Ascends from #btn back to root.
   • On #inner: Bubbling listener runs. Logs 5: Inner Bubble.
   • On #outer: Bubbling listener runs. Logs 1: Outer Bubble.

Spoken Explanation & Common Mistakes

• Spoken Summary: "Capture listeners execute top-down as the event travels down the DOM tree (outer then inner), followed by the target listener on btn, followed by bubbling listeners executing bottom-up (inner then outer)."
• Common Mistake: Listing 2: Inner Capture before 3: Outer Capture based on registration order. During capturing, DOM tree depth dictates sequence, not registration order.

Q3. Execution Order on the Exact Target Node

Difficulty: Mid
Target Concept: Listener ordering during eventPhase === Event.AT_TARGET in the modern DOM standard.

Code Snippet

// Setup DOM structure:
// <div id="container">
//   <button id="targetBtn">Click</button>
// </div>

const targetBtn = document.getElementById('targetBtn');

targetBtn.addEventListener('click', () => console.log('A: Target Bubble'), false);
targetBtn.addEventListener('click', () => console.log('B: Target Capture'), true);
targetBtn.addEventListener('click', () => console.log('C: Target Bubble Second'), false);

targetBtn.click();

What is the exact console output?

Predicted Output

A: Target Bubble
B: Target Capture
C: Target Bubble Second

Step-by-Step Execution Trace

1. When the event reaches the target element itself (eventPhase === Event.AT_TARGET), capturing and bubbling phase distinctions do not reorder listeners.
2. In the modern WHATWG DOM Standard, listeners registered directly on the target element execute in strict registration order, regardless of their capture flags.
3. First listener registered on targetBtn: A: Target Bubble (registered with false). Executes first.
4. Second listener registered on targetBtn: B: Target Capture (registered with true). Executes second.
5. Third listener registered on targetBtn: C: Target Bubble Second (registered with false). Executes third.

Spoken Explanation & Common Mistakes

• Spoken Summary: "At the target phase (AT_TARGET), modern browsers execute listeners registered on the target node in strict registration order. The capture flag only prioritizes ancestor nodes during descent."
• Common Mistake: Assuming B: Target Capture must execute before A: Target Bubble on the target node because capture precedes bubbling in general.

Q4. stopPropagation() vs Outer Ancestor Listeners

Difficulty: Mid
Target Concept: How event.stopPropagation() halts upward bubbling while allowing peer listeners on the current node to finish.

Code Snippet

// Setup DOM structure:
// <div id="card">
//   <button id="deleteBtn">Delete</button>
// </div>

const card = document.getElementById('card');
const deleteBtn = document.getElementById('deleteBtn');

card.addEventListener('click', () => {
  console.log('Card clicked: navigate to details');
});

deleteBtn.addEventListener('click', (e) => {
  console.log('1: Delete handler A');
  e.stopPropagation();
});

deleteBtn.addEventListener('click', () => {
  console.log('2: Delete handler B');
});

deleteBtn.click();

What is the exact console output?

Predicted Output

1: Delete handler A
2: Delete handler B

Step-by-Step Execution Trace

1. The click event initiates on deleteBtn.
2. First listener on deleteBtn executes: logs 1: Delete handler A, then calls e.stopPropagation().
3. e.stopPropagation() sets an internal flag preventing the event from propagating to subsequent elements along the event path.
4. However, stopPropagation() does not stop other listeners registered on the same element from executing.
5. Second listener on deleteBtn executes: logs 2: Delete handler B.
6. Bubbling towards #card is prevented by the stopped flag. The #card listener never runs.

Spoken Explanation & Common Mistakes

• Spoken Summary: "event.stopPropagation() prevents the event from bubbling up to parent ancestors like #card, but allows remaining listeners registered on the current element (deleteBtn) to run."
• Common Mistake: Assuming stopPropagation() immediately terminates all subsequent listeners on the current element, omitting 2: Delete handler B.

Q5. stopImmediatePropagation() vs Peer Listeners

Difficulty: Mid
Target Concept: Complete termination of all remaining listeners, including peers on the same element.

Code Snippet

// Setup DOM structure:
// <button id="multiBtn">Run</button>

const btn = document.getElementById('multiBtn');

btn.addEventListener('click', () => {
  console.log('First listener running');
});

btn.addEventListener('click', (e) => {
  console.log('Second listener: stopping immediately');
  e.stopImmediatePropagation();
});

btn.addEventListener('click', () => {
  console.log('Third listener running');
});

btn.click();

What is the exact console output?

Predicted Output

First listener running
Second listener: stopping immediately

Step-by-Step Execution Trace

1. The click event dispatches to btn.
2. The browser iterates through the registered listener list for btn in FIFO registration order.
3. Listener 1 runs: logs First listener running.
4. Listener 2 runs: logs Second listener: stopping immediately, and calls e.stopImmediatePropagation().
5. e.stopImmediatePropagation() halts further listener iteration on the current element and cancels ancestor propagation.
6. Listener 3 is skipped entirely.

Spoken Explanation & Common Mistakes

• Spoken Summary: "Unlike stopPropagation(), stopImmediatePropagation() halts execution immediately, blocking subsequent listeners registered on the current element as well as preventing propagation to ancestors."
• Common Mistake: Believing stopImmediatePropagation() only behaves like stopPropagation(), expecting Listener 3 to execute.

Q6. Event Delegation with Nested Child Elements

Difficulty: Mid
Target Concept: How nested child elements change event.target and handling delegation with closest().

Code Snippet

// Setup DOM structure:
// <ul id="list">
//   <li id="item-1">
//     <button class="delete-btn" data-id="1">
//       <span class="icon">🗑️</span>
//       <span class="text">Remove</span>
//     </button>
//   </li>
// </ul>

const list = document.getElementById('list');

list.addEventListener('click', (e) => {
  console.log('Clicked node tag:', e.target.tagName);
  const btn = e.target.closest('.delete-btn');
  if (btn) {
    console.log('Button found with id:', btn.dataset.id);
  } else {
    console.log('No button match');
  }
});

// User clicks directly on the icon inside the button:
const icon = document.querySelector('.icon');
icon.click();

What is the exact console output?

Predicted Output

Clicked node tag: SPAN
Button found with id: 1

Step-by-Step Execution Trace

1. The click originates directly on the <span class="icon"> element.
2. The event bubbles through the hierarchy: span.icon -> button.delete-btn -> li#item-1 -> ul#list.
3. The delegated click listener on ul#list receives the event.
4. e.target refers strictly to the origin element clicked (span), so e.target.tagName logs 'SPAN'.
5. e.target.closest('.delete-btn') ascends from the span to find the nearest matching ancestor, resolving to <button class="delete-btn" data-id="1">.
6. btn.dataset.id reads '1', logging Button found with id: 1.

Spoken Explanation & Common Mistakes

• Spoken Summary: "Clicking a nested child makes e.target that child node (the SPAN), not the button. Robust event delegation uses e.target.closest('selector') rather than checking e.target.tagName directly."
• Common Mistake: Expecting e.target to automatically be the <button> because the button is the interactive control.

Q7. One-Time Listeners ({ once: true }) Across Multi-Clicks

Difficulty: Mid
Target Concept: The lifecycle and auto-removal mechanics of { once: true }.

Code Snippet

// Setup DOM structure:
// <div id="panel">
//   <button id="trigger">Click</button>
// </div>

const panel = document.getElementById('panel');
const trigger = document.getElementById('trigger');

let count = 0;

trigger.addEventListener('click', () => {
  count += 1;
  console.log(`Trigger: count is ${count}`);
}, { once: true });

panel.addEventListener('click', () => {
  count += 10;
  console.log(`Panel: count is ${count}`);
});

// First click:
trigger.click();

// Second click:
trigger.click();

What is the exact console output?

Predicted Output

Trigger: count is 1
Panel: count is 11
Panel: count is 21

Step-by-Step Execution Trace

1. First Click:
   • Reaches trigger: listener increments count to 1. Logs Trigger: count is 1.
   • Browser automatically removes this listener from trigger.
   • Event bubbles to panel: listener increments count by 10 to 11. Logs Panel: count is 11.
2. Second Click:
   • Reaches trigger: no listeners remain on trigger.
   • Event bubbles to panel: listener increments count by 10 to 21. Logs Panel: count is 21.

Spoken Explanation & Common Mistakes

• Spoken Summary: "The { once: true } option removes the handler after its first invocation. On subsequent clicks, only the persistent parent listener on panel executes."
• Common Mistake: Believing { once: true } stops bubbling on the first click, or removes listeners from the entire DOM hierarchy.

Q8. Capture vs Bubble Combined with stopPropagation()

Difficulty: Mid-Senior
Target Concept: Halting an event during the downward capturing phase before it reaches the target.

Code Snippet

// Setup DOM structure:
// <div id="grandparent">
//   <div id="parent">
//     <button id="btn">Click</button>
//   </div>
// </div>

const grandparent = document.getElementById('grandparent');
const parent = document.getElementById('parent');
const btn = document.getElementById('btn');

grandparent.addEventListener('click', () => {
  console.log('1: Grandparent Capture');
}, true);

parent.addEventListener('click', (e) => {
  console.log('2: Parent Capture with stop');
  e.stopPropagation();
}, true);

btn.addEventListener('click', () => {
  console.log('3: Button Target');
});

parent.addEventListener('click', () => {
  console.log('4: Parent Bubble');
});

grandparent.addEventListener('click', () => {
  console.log('5: Grandparent Bubble');
});

btn.click();

What is the exact console output?

Predicted Output

1: Grandparent Capture
2: Parent Capture with stop

Step-by-Step Execution Trace

1. Event begins capture phase downwards towards btn.
2. Reaches grandparent during capture: logs 1: Grandparent Capture.
3. Reaches parent during capture: logs 2: Parent Capture with stop, then calls e.stopPropagation().
4. Propagation halts immediately along the event path.
5. Neither btn (target) nor any bubbling listeners on parent or grandparent ever execute.

Spoken Explanation & Common Mistakes

• Spoken Summary: "Calling stopPropagation() during capture intercepts the event before it ever reaches the target. Propagation stops, preventing the target and bubbling handlers from firing."
• Common Mistake: Expecting the target button listener to fire under the mistaken assumption that stopPropagation() only halts bubbling.

Q9. Non-Bubbling Events (focus vs focusin) in Delegation

Difficulty: Mid-Senior
Target Concept: Non-bubbling events (focus, blur) vs bubbling counterparts (focusin, focusout), and using capture mode for delegation.

Code Snippet

// Setup DOM structure:
// <form id="loginForm">
//   <input id="username" type="text" />
// </form>

const form = document.getElementById('loginForm');
const input = document.getElementById('username');

// Listener A: 'focus' with default bubbling (false)
form.addEventListener('focus', () => {
  console.log('A: Form focus (bubble)');
}, false);

// Listener B: 'focus' with capturing (true)
form.addEventListener('focus', () => {
  console.log('B: Form focus (capture)');
}, true);

// Listener C: 'focusin' with default bubbling (false)
form.addEventListener('focusin', () => {
  console.log('C: Form focusin (bubble)');
}, false);

// Focus the input:
input.focus();

What is the exact console output?

Predicted Output

B: Form focus (capture)
C: Form focusin (bubble)

Step-by-Step Execution Trace

1. input.focus() dispatches focus (bubbles: false) and focusin (bubbles: true).
2. For focus:
   • Descends during capture: Listener B (capture: true) catches it on #loginForm. Logs B: Form focus (capture).
   • Reaches target #username.
   • Does not bubble: Listener A (capture: false) never executes.
3. For focusin:
   • Fires and bubbles up to #loginForm. Listener C (capture: false) catches it. Logs C: Form focusin (bubble).

Spoken Explanation & Common Mistakes

• Spoken Summary: "Native focus and blur do not bubble. To delegate them on an ancestor, you must capture them (capture: true) or use bubbling equivalents focusin and focusout."
• Common Mistake: Assuming all DOM events bubble, expecting Listener A to execute.

Q10. preventDefault() Impact on Propagation vs Default Actions

Difficulty: Mid-Senior
Target Concept: Disentangling default action cancellation (preventDefault()) from event propagation (stopPropagation()).

Code Snippet

// Setup DOM structure:
// <div id="wrapper">
//   <a id="link" href="https://example.com">Visit</a>
// </div>

const wrapper = document.getElementById('wrapper');
const link = document.getElementById('link');

wrapper.addEventListener('click', (e) => {
  console.log('Wrapper clicked, defaultPrevented:', e.defaultPrevented);
});

link.addEventListener('click', (e) => {
  console.log('Link clicked: canceling default navigation');
  e.preventDefault();
});

link.click();

What is the exact console output?

Predicted Output

Link clicked: canceling default navigation
Wrapper clicked, defaultPrevented: true

Step-by-Step Execution Trace

1. Synthetic click dispatches to link.
2. Target Phase: Listener on link logs Link clicked: canceling default navigation and calls e.preventDefault().
3. preventDefault() sets the canceled flag (defaultPrevented = true) but does not halt propagation.
4. Bubbling Phase: Event bubbles to wrapper. Listener logs Wrapper clicked, defaultPrevented: true.
5. Browser suppresses native hyperlink navigation after listeners finish.

Spoken Explanation & Common Mistakes

• Spoken Summary: "event.preventDefault() cancels the browser default action (e.g. navigation) but has no effect on propagation. The event continues bubbling, and ancestors can inspect event.defaultPrevented."
• Common Mistake: Confusing preventDefault() with stopPropagation(), assuming default cancellation halts propagation.

---

Preparation Checklist

To master DOM events and event delegation before your next front-end interview, review this actionable checklist:

• Distinguish target vs currentTarget: target is where the user clicked (origin node), while currentTarget is the element to which the listener is attached.
• Memorize the 3 phases: Capturing (1), At-target (2), and Bubbling (3). By default, addEventListener(type, fn) only listens during phases 2 and 3.
• Know propagation methods: stopPropagation() stops ancestor travel; stopImmediatePropagation() also stops other listeners on the same element; preventDefault() only prevents default browser behaviors.
• Audit non-bubbling events: Events that do not bubble include focus, blur, mouseenter, mouseleave, load, and unload. Use focusin/focusout or { capture: true } when delegating them.
• Use Element.prototype.closest() in delegation: When implementing delegated event handlers for elements with child icons or nested markup, always traverse up using e.target.closest(selector).
• Understand { once: true } and { passive: true }: Know how { once: true } cleans up handlers after first run, and how { passive: true } promises never to call preventDefault(), boosting scroll performance.
• Trace complex code on a whiteboard: Practise drawing the DOM tree and tracing arrows down during capture and up during bubble before answering output-prediction questions.

---

Conclusion

Understanding the browser's native event propagation pipeline is a key differentiator in technical interviews. By recognizing how capturing, at-target, and bubbling phases interact with listener options and delegation strategies, you can confidently explain not just what code outputs, but why the browser runtime behaves that way. Practise writing out event traces systematically during interviews to demonstrate senior-level mastery of the DOM.

---

Sources

• MDN Web Docs: Event bubbling and capture
• MDN Web Docs: Introduction to events
• MDN Web Docs: EventTarget.addEventListener()
• MDN Web Docs: Event.stopPropagation()
• MDN Web Docs: Event.stopImmediatePropagation()
• WHATWG DOM Standard: Event Dispatch Algorithm