IconVault logoIconVault
Sign in

Event Propagation - Interactive Lab | IconVault

Watch a real click travel through capturing, target and bubbling phases with animated highlights. Free interactive lab, runs in your browser.

All tools

Event Propagation

Watch capturing, target and bubbling phases animate

5 of 5 free uses left

Capture listeners

Bubble listeners

Interruption

CAPTURINGTARGETBUBBLING

5 of 5 free dispatches left.

grandparent div

parent div

Phase log (real eventPhase values)

// press "Dispatch click"

Generated code

// current configuration
grandparent.addEventListener("click", onGp, { capture: true });
parent.addEventListener("click", onP, { capture: true });
child.addEventListener("click", onChild); // target phase
parent.addEventListener("click", onP);
grandparent.addEventListener("click", onGp);
// fire order for a click on child:
// (press dispatch)

Reading the animation

A click travels down from the window through capture listeners, hits the target, then travels up through bubble listeners. Most handlers use bubbling (the default). Use capture when a parent must see the event first, and stopPropagation() sparingly: it also blocks other components listening higher up. Note: at the target itself, capture and bubble listeners fire in registration order.

About this tool

IconVault's Event Propagation visualizer animates a real click as it travels through the DOM. Toggle capture and bubble listeners on each level, press dispatch, and watch the event move down through capturing, hit the target, then travel up through bubbling, with every step logged using real eventPhase values. It is free and runs fully in your browser.

You can also inject stopPropagation() at any level and see exactly which listeners never fire, which makes the behavior concrete instead of theoretical. The page generates the matching addEventListener code for your current configuration, ready to copy.

Frequently asked questions

Popular searches

event propagationjavascript event propagationevent capturingevent bubblingcapturing vs bubblingevent phases javascripteventphaseevent.phase 1 2 3stoppropagationstopimmediatepropagationstoppropagation vs stopimmediatepropagationaddeventlistener capture truecapture phase examplebubble phase exampletarget phaseevent flow domdom event flowhow events travel in domevent propagation visualizerevent bubbling animationevent capturing animationinteractive event propagationlearn event bubblingevent delegation bubblingwhy use event capturingwhen to use capture trueevent propagation ordernested click handlers orderparent child click both fireprevent parent click when child clickedevent bubbling problemstop event bubblingevent propagation interview questionjavascript event modeldom level 2 eventsw3c event flowevent listener phasesat_target phasecapturing_phase bubbling_phasee.eventphaseevent pathcomposedpathevent propagation reactreact synthetic events bubblingevent propagation vueevent propagation angularevent propagation tutorialdom events explainedjavascript events deep diveevent propagation playgroundevent propagation demovisualize event bubblingevent order visualizer

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →