Flex event phase detection example

With example below an introduction of phases in flex is demonstrated. In flex there are three phases. capturing, targeting and bubbling. These phases are actually the periods in which the flex does different jobs regarding an event, such as detecting the event listener for handling the event, triggering and then re-detecting listeners in reverse order for handling the event again. Event listeners are the functions or the methods that we create in our applications and inside event listeners, we create event associated objects. Event retorts (responds) , inside those function in which the corresponding event object is made.

Now going one by one we first have capturing phase in which flex checks containers like VBox for the event listeners for handling the event inside them. Event listeners are either called or initialized inside the flex controls with click and initialize attributes respectively. In Targeting phase flex just triggers the event and in the Bubbling phase flex re-begins its search for listeners but in order opposite to that was in capturing phase.

.eventPhase property of event object is used to detect the current phase of event. This property by default allocates the numbers 1, 2 and 3 to the phases capturing, targeting and bubbling respectively. In the example, event current phase is detected inside different TextInput controls.

Phase.mxml


<?xml version = '1.0' encoding = 'ISO-8859-1'?>

<mx:Application xmlns:mx = 'http://www.adobe.com/2006/mxml'>

  <mx:Script>

  public function eve(event:Event):void{

  txt0.text = 'Current Phase: ' + event.eventPhase;

  }  



  public function rose(event:Event):void{

  txt1.text = 'Current Phase: ' + event.eventPhase;

  }  

  

  public function neo(event:Event):void{

  txt2.text = 'Current Phase: ' + event.eventPhase;

  }



</mx:Script>  



  <mx:VBox>

  <mx:HBox>

  <mx:Label text = 'txt0' color = 'red'/>

  <mx:TextInput id = 'txt0' color = 

  'blue' click = 'eve(event);'/>

  </mx:HBox>



  <mx:HBox>

  <mx:Label text = 'txt1' color = 'red'/>

  <mx:TextInput id = 'txt1' color = 'blue'

 click = 'rose(event);'/>

  </mx:HBox>





  <mx:HBox>

  <mx:Label text = 'txt2' color = 'red'/>

  <mx:TextInput id = 'txt2' color = 'blue'

 click = 'neo(event);'/>

  </mx:HBox>

  </mx:VBox>





  <mx:HBox>  

  <mx:Button color = 'green' label = 

  'Phase detector' mouseOver = 'eve(event)

  ;rose(event);neo(event)'/>

  <mx:Button color = 'green' label = 'click me'

 click = 'eve(event);rose(event);

 neo(event)'/>

  </mx:HBox>  

</mx:Application>

Phase.swf

Download the code

Flex event phase detection example

Flex event phase detection example

Flex event phase detection example

Tutorials