Bubbling And Target Event Phase

In Flex, we need to know what are the 'target' and 'currentTarget' properties of the Event object and also the
3 stages of Event processing. Let us go through them.

1. target and currentTarget properties: 'target' always refers to the component that has dispatched the event in
first place (example: Button component dispatching click event) and the 'currentTarget' refers to the container
which is currently handling the event (Example, VBOX container in which the above Button is placed and VBOX has
registered for listening to the Button's click event).

In Flex, there are 3 stages of Event processing:
1. Capturing Phase
2. Target Phase
3. Bubbling Phase

Consider the below example which has Application, inside which we have a Panel, inside which we have a VBOox and
then a Button Control.
So, the structure looks like this:

Application
Panel
VBox
Button

Say now, we have clicked on the button. This calls the 'click' event on button. Here, the 'target' object would
always be the same 'button'.

In Capturing Phase: Flex examies the Button's ancestors from the Application right down to the immediate ancestor
of the button (i.e. VBox in this case). This is hardly used. So, in this, the following steps occur during the
capturing phase in same order"
1. Check the Application container for click event listeners (target: Button, currentTarget: Application)
2. Check the Panel container for click event listeners (target: Button, currentTarget: Panel)
3. Check the VBox container for click event listeners (target: Button, currentTarget: VBox)

In Target Phase: Flex reaches the Button for seeing the listeners and here the 'target' and 'currentTarget' refers
to the same component i.e (target:Button, currentTarget: Button)

In Bubbling Phase: Flex examines the Button's ancestors for listeenrs. But here, it starts with the dispatcher's
(button's) immediate ancestor (VBox) and moves all up the display list to the root ancestor (i.e Application). This
is the reverse of the Capturing phase and most often used. The following steps occur in same order:
1. Check the VBox container for click event listeners (target: Button, currentTarget: VBox)
2. Check the Panel container for click event listeners (target: Button, currentTarget: Panel)
3. Check the Application container for click event listeners (target: Button, currentTarget: Application)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
 click="clickHandler(event)" name="Application">
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   private function clickHandler(event:MouseEvent):void {
    Alert.show("Target object: "+event.target.name
    +"\n"+
    "Phase: "+getPhaseName(event.eventPhase)
    +"\n"+
    "Current Target object: "+event.currentTarget.name);
   }
   
   private function getPhaseName(phase:uint):String {
    switch(phase) {
     case 1:
      return "CAPTURING PHASE";
     case 2:
      return "TARGET PHASE"; 
     case 3:
      return "BUBBLING PHASE";
    }
    return "";
   }
  ]]>
 </mx:Script>
 <mx:Panel borderThickness="250" name="Panel" click="clickHandler(event)" width="500" height="300">
  <mx:VBox backgroundColor="#EEEEEE" click="clickHandler(event)" name="VBox" height="200" width="300" 
   horizontalAlign="center" verticalAlign="middle">
   <mx:Button name="Button" label="Click Me" click="clickHandler(event)" />
  </mx:VBox>
 </mx:Panel>
</mx:Application>

In the above example, we have placed the click event handler on the containers (i.e Application, Panel, VBox) as well as the Button component
However, if you try to remove the click="clickHandler(event)" from any 1 container, say VBox, then on click of the VBox, you would find
that the Alert for the Bubbling phase with the currentTarget of Panel and Application gets displayed as they are checked in the bubbling
phase for the click event and since they have the handler for the click event, it gets called.
However, the Target phase of the VBox won't be called in this case as VBox does not handles the click event itself.