Interview question

What is the difference between event bubbling and event capturing? Event bubbling और event capturing में क्या अंतर है?

Answer

These are the two phases of DOM event propagation, describing the order in which nested elements receive an event.

Phase	Direction	Default behavior
Capturing	Top (document) down to the target element	Off by default; opt-in with { capture: true }
Bubbling	Target element up to the top (document)	Default phase for most listeners

// HTML structure: <div id='outer'><div id='inner'><button id='btn'></button></div></div>

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

// Bubbling phase listeners (default)
outer.addEventListener('click', () => console.log('Outer (bubble)'));
inner.addEventListener('click', () => console.log('Inner (bubble)'));
btn.addEventListener('click', () => console.log('Button (bubble)'));

// Clicking the button logs (bubbling goes target -> up):
// Button (bubble)
// Inner (bubble)
// Outer (bubble)

// Capturing phase listeners
outer.addEventListener('click', () => console.log('Outer (capture)'), { capture: true });
inner.addEventListener('click', () => console.log('Inner (capture)'), { capture: true });

// Full order when both phases have listeners (capture goes down first, then bubble goes up):
// Outer (capture)
// Inner (capture)
// Button (bubble)
// Inner (bubble)
// Outer (bubble)

// Stopping propagation
btn.addEventListener('click', (event) => {
    event.stopPropagation(); // prevents the event from bubbling further up
    console.log('Button clicked, propagation stopped');
});
// Now 'Inner (bubble)' and 'Outer (bubble)' won't fire

// stopImmediatePropagation also stops OTHER listeners on the SAME element
btn.addEventListener('click', (e) => {
    e.stopImmediatePropagation();
});
btn.addEventListener('click', () => {
    console.log('This never runs due to stopImmediatePropagation');
});

ये DOM event propagation के दो phases हैं, जो बताते हैं कि nested elements किस क्रम में event receive करते हैं।

Phase	Direction	Default
Capturing	Top (document) से target तक	Default off, capture: true से enable
Bubbling	Target से top तक	ज़्यादातर listeners के लिए default

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

// Bubbling phase (default)
outer.addEventListener('click', () => console.log('Outer (bubble)'));
inner.addEventListener('click', () => console.log('Inner (bubble)'));
btn.addEventListener('click', () => console.log('Button (bubble)'));

// Button click पर order (target से ऊपर):
// Button (bubble)
// Inner (bubble)
// Outer (bubble)

// Capturing phase
outer.addEventListener('click', () => console.log('Outer (capture)'), { capture: true });

// stopPropagation
btn.addEventListener('click', (event) => {
    event.stopPropagation(); // ऊपर जाना रोकता है
});

// stopImmediatePropagation - same element के अन्य listeners भी रोकता है
btn.addEventListener('click', (e) => {
    e.stopImmediatePropagation();
});

Was this answer clear?

Subjects

Related questions