This example demonstrates event bubbling phases. The red Shape is a child
of a Container, which is a child
of the Stage. Event listeners have been added for the capture and bubble
phase of the click event for all three
objects. Clicking on the Shape outputs the event details, and
demonstrates how the target
, eventPhase
, and
currentTarget
properties work.
Note how in the initial capture phase (eventPhase=1), the event moves from the stage down to the target, is dispatched from the target in the target phase (eventPhase=2), and then bubbles back up to the stage in the bubble phase (eventPhase=3).
Also note how the target property is always the Shape that was clicked on, while the currentTarget points to the object that is currently dispatching the event.