easyFrontend

What is event bubbling and capturing?

459 views
01

Understand the problem

Explain event propagation.

events
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

03

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

04

Read the code

phases on nested elements (DOM)
outer.addEventListener('click', () => console.log('outer (bubble)'));
inner.addEventListener('click', () => console.log('inner (target)'));
outer.addEventListener('click', () => console.log('outer (capture)'), true);

// Clicking #inner logs:
//   'outer (capture)'  -> capturing phase, top-down
//   'inner (target)'
//   'outer (bubble)'   -> bubbling phase, bottom-up
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.