flash propagation_listening

In order to follow the propagation of an event we can subscribe a listener to each phase. By displaying the values of the eventPhase, target and currentTarget properties of the event object we obtain the path taken by the event.

In the following code the listenPhase function is subscribed to the three phases of the MouseEvent.CLICK event:

// number of windows
var lng:int = 12;
// creation of a container
var windowContainer:Sprite = new Sprite();
// added to the display list
addChild ( windowContainer );
var myWindow:Window;
// modification of the animation’s speed
stage.frameRate = 30;
for (var i:int = 0; i< lng; i++ )
{
myWindow = new Window();
myWindow.destX = 7 + Math.round ( i % 3 ) * ( myWindow.width + 10 );
myWindow.destY = 7 + Math.floor ( i / 3 ) * ( myWindow.height + 10
);
// subscription of each instance for the target phase
myWindow.addEventListener ( MouseEvent.CLICK, listenPhase );
myWindow.addEventListener ( Event.ENTER_FRAME, movement );
windowContainer.addChild ( myWindow );
}
function movement ( pEvt:Event ):void
{
// inertia algorithm
pEvt.target.x -= ( pEvt.target.x - pEvt.target.destX ) * .3;
pEvt.target.y -= ( pEvt.target.y - pEvt.target.destY ) * .3;
}
// subscription of the container for the bubbling phase
windowContainer.addEventListener ( MouseEvent.CLICK, listenPhase );
// subscription of the container for the capture phase
windowContainer.addEventListener ( MouseEvent.CLICK, listenPhase, true );
function listenPhase ( pEvt:MouseEvent ):void
{
/* displays :
1 : Capture phase of the event: click
Objet target : [object Window]
Objet notified : [object Sprite]
2 : Target phase of the event: click
Objet target : [object Window]
Objet notified : [object Window]
3 : Bubbling phase of the event: click
Objet target : [object Window]
Objet notified : [object Sprite]
*/
switch ( pEvt.eventPhase )
{
case EventPhase.CAPTURING_PHASE :
trace ( pEvt.eventPhase + " : Capture phase of the event: "
+ pEvt.type );
break;
case EventPhase.AT_TARGET :
trace ( pEvt.eventPhase + " : Target phase of the event: " +
pEvt.type );
break;
case EventPhase.BUBBLING_PHASE :
trace ( pEvt.eventPhase + " : Bubbling phase of the event:
" + pEvt.type );
break;
}
trace( "Objet target : " + pEvt.target );
trace( "Objet notified : " + pEvt.currentTarget );
}

The output panel displays the history of the propagation of the MouseEvent.CLICK event.

Worth remembering

• Following the example of the capture phase, the bubbling phase is only concerned by the parent objects.
• The bubbling phase allows a parent object to be notified by an event coming from one of its children.
• The same listener can be subscribed to different phases of an event.

To know if an event participates in the bubbling phase we use the bubbles property of the event object. We can update the listenPhase function in order to know if the event in progress participates in the bubbling phase:

function listenPhase ( pEvt:MouseEvent ):void
{
/* displays :
1 : Capture phase of the event: click
Objet target : [object Window]
Objet notified : [object Sprite]
Event participating in the bubbling phase: true
2 : Target phase of the event: click
Objet target : [object Window]
Objet notified : [object Window]
Event participating in the bubbling phase: true
3 : Bubbling phase of the event: click
Objet target : [object Window]
Objet notified : [object Sprite]
Event participating in the bubbling phase: true
*/
switch ( pEvt.eventPhase )
{
case EventPhase.CAPTURING_PHASE :
trace ( pEvt.eventPhase + " : Capture phase of the event: "
+ pEvt.type );
break;
case EventPhase.AT_TARGET :
trace ( pEvt.eventPhase + " : Target phase of the event: " +
pEvt.type );
break;
case EventPhase.BUBBLING_PHASE :
trace ( pEvt.eventPhase + " : Bubbling phase of the event:
" + pEvt.type );
break;
}
trace( "Objet target : " + pEvt.target );
trace( "Objet notified : " + pEvt.currentTarget );
trace ( "Event participating in the bubbling phase: " + pEvt.bubbles );
}

We note that all events propagating towards the top participate in the capture and target phases.