Capturing Phase Event

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"
 initialize="addCapturingPhaseEvent(event)" name="Application">
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   
   private function addCapturingPhaseEvent(event:Event):void {
    /*  to use capturing phase, we need to pass the "useCapture" parameter as true once
      and false another time as the third parameter to the addEventListener method.
      Passing "false" as the third parameter (Which is by default, but gets overridden if
      we have passed as "true" once, will call the Bubbling as well as the Target phase 
    */
    
    Application.application.addEventListener(MouseEvent.CLICK,clickHandler,true);
    
    // The below line if commented, will not call the bubbling and the target phase
    // as we have set useCapture = true in the previous statement
    
    Application.application.addEventListener(MouseEvent.CLICK,clickHandler,false);
    myPanel.addEventListener(MouseEvent.CLICK,clickHandler,true); 
    myPanel.addEventListener(MouseEvent.CLICK,clickHandler,false); 
    myBtn.addEventListener(MouseEvent.CLICK,clickHandler,true); 
    myBtn.addEventListener(MouseEvent.CLICK,clickHandler,false); 
    myVBox.addEventListener(MouseEvent.CLICK,clickHandler,true); 
    myVBox.addEventListener(MouseEvent.CLICK,clickHandler,false); 
   }
   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" id="myPanel" width="500" height="300">
  <mx:VBox backgroundColor="#EEEEEE" id="myVBox" name="VBox" height="200" width="300" 
   horizontalAlign="center" verticalAlign="middle">
   <mx:Button name="Button" label="Click Me" id="myBtn" />
  </mx:VBox>
 </mx:Panel>
</mx:Application>