Top 30 JavaScript Event Propagation Interview Questions with Answers

1. What is event propagation in JavaScript?

Event propagation is the process by which an event travels through the DOM tree. It includes capturing,

target, and bubbling phases.

2. What are the three phases of event propagation?

1. Capturing phase

2. Target phase

3. Bubbling phase

3. What is event bubbling?

Event bubbling is when an event starts from the target element and bubbles up to the root of the DOM tree.

4. What is event capturing (or trickling)?

Event capturing is the phase where the event starts from the root and trickles down to the target element.

5. What is the default phase in JavaScript event propagation?

JavaScript uses the bubbling phase by default when handling events.

6. How do you add an event listener that runs in the capturing phase?

You can pass `true` as the third parameter or set `{ capture: true }` in `addEventListener`. Example:

`element.addEventListener('click', handler, true);`

7. How do you stop event propagation?

Use `event.stopPropagation()` to prevent the event from bubbling or capturing further.

8. What is event.stopPropagation()?

It stops the event from moving to the next event listener in the propagation chain.

9. What is event.stopImmediatePropagation()?
 Top 30 JavaScript Event Propagation Interview Questions with Answers

It stops the event from propagating and prevents other listeners of the same event from being called.

10. What is event.preventDefault() and how is it different from stopPropagation()?

`event.preventDefault()` prevents the default browser action, while `stopPropagation()` stops the event from

traveling through the DOM.

11. What happens if you nest elements with event handlers? Which one fires first?

In bubbling, the innermost (target) handler fires first, then parent handlers. In capturing, the outermost

handler fires first.

12. Can both capturing and bubbling phases be used at the same time?

Yes, event listeners can be added for both capturing and bubbling phases.

13. What is the order of execution if the same event is registered in both capturing and bubbling ph

Capturing phase listeners execute before bubbling phase listeners.

14. How to add multiple listeners for the same event on the same element?

Use `addEventListener` multiple times. Each call adds a separate handler.

15. What is event.target vs event.currentTarget?

`event.target` is the actual element that triggered the event. `event.currentTarget` is the element the listener

is attached to.

16. How do delegation and propagation relate to each other?

Event delegation uses propagation to handle events at a parent level rather than on each child element.

17. What is event delegation?

It's a technique of attaching a single event listener to a parent element to manage events from child elements.
 Top 30 JavaScript Event Propagation Interview Questions with Answers

18. Why is event delegation useful in JavaScript?

It reduces memory usage and allows dynamic child elements to be handled efficiently.

19. How do you implement event delegation in vanilla JavaScript?

Use a parent listener and check the event target:

div.addEventListener('click', e => {

if (e.target.matches('button')) { ... }

});

20. What are the performance benefits of event delegation?

Fewer event listeners improve performance, especially when working with many DOM elements.

21. Can you stop propagation in the capturing phase?

Yes, calling `stopPropagation()` in the capturing phase will stop it before reaching the target.

22. What's the difference between addEventListener's once, capture, and passive options?

`once`: fires once and removes itself

`capture`: true to use capturing phase

`passive`: true if listener won't call preventDefault()

23. How does passive: true affect event propagation and performance?

It tells the browser the event won't be cancelled, improving scroll performance.

24. What is the event propagation order between window, document, and elements?

In capturing: window document html body target

In bubbling: reverse order from target up.

25. Can you modify propagation behavior dynamically (after event is attached)?

No, once attached, the options (like capture) can't be changed without removing and re-adding the listener.
 Top 30 JavaScript Event Propagation Interview Questions with Answers

26. What are common mistakes developers make with event propagation?

Not stopping propagation when needed, or forgetting that stopPropagation doesn't prevent default behavior.

27. Can you provide an example where stopping propagation prevents a bug?

Clicking a button inside a modal might trigger an unwanted click on the background; stopping propagation

prevents modal closure.

28. How do frameworks like React or Angular handle event propagation differently?

React uses synthetic events that mimic native events; Angular uses `@HostListener` and native event

system with zone.js.

29. How do custom events propagate compared to native events?

Custom events can bubble and capture if specified during creation: `new CustomEvent('name', { bubbles:

true })`

30. Can event propagation cross shadow DOM boundaries?

No, events do not cross shadow DOM boundaries by default unless composed is set to true: `new

Event('name', { composed: true })`