Event Propogation

Posted on: September 16, 2008

There are different kinds of events in the Flex world. An event can be generated from user gesture, return of requests and component lifecycle. Use event is a two step process, (1) You need to write the handler (2) You need to register the handler to the event hook. To register event, there are two different ways:

Inline MXML way:<mx:Button id=”myButton” click=”myhandler(event)”/>

Actionscript way: myButton.addEventListener(MouseEvent.CLICK, myhandler);

The code above does the same job.  However, addEventListener provides more advanced control like event propagation and event priority. Event in Flex can be dispatched implicitly (user clicks on a button, the event is dispatched by the system) and explicitly (you can programmatically trigger an event).

Event propagation is an important topic for Flex programming. So, I will try to talk about what I have known on this topic here. Feel free to correct me if I am wrong. As I know, event propagation has three phases. They are capturing, at target, and bubbling. If you have an Application A contains a VBox B that has a Button C. When an user clicks the Button C, it first goes through “capturing phase”. In this phase, the event propagation through the topmost parent of C (ie. stage) and continue walk down the display object hierarchy until it reaches the original target (ie. C). The path for capturing phase is stage -> root -> A -> B -> C. When the event reaches C, the “at target phase” will be started and it just involves one object (ie. C). After that, the event bubbles up following the reverse path of the capturing phase and walk its way back up to root (C -> B -> A -> root -> stage). This is called “bubbling phase”.


As the event makes its way though each phase and each object within those phases, it calls all of the listener functions that were added for that event. This means that clicking on the Button C doesn’t limit the event to C, A and B also receive the event. Actually, they receive the event twice, once in the capturing phase and once in the bubbling phase.

However, by default, listener cannot receive event in capturing phase because the capability is turned off. To enable it, we need to set “true” to the third parameter in “addEventListener”, the “useCapture” parameter. If you don’t do that, listener would just listen to event in the “at target” or “bubbling” phase. However, it is an exclusion setting. Once you set the “useCapture” to true, it will not receive event in other phases. To get around this, you need to use “addEventListener” twice, once with “useCapture” set to false (or omitted) and once with “useCapture” set to true.  On the other hand, any listener along the path can stop the event propagation.

In the Event object, the “target” attributed is the component where the event originated (ie. C in this example) whereas “currentTarget” attribute is the component that event currently reaches. So, this attribute’s value will be changed along the propagation path. Apart from these two properties, Event object also contains properties like type (String), eventPhase (int), bubbles (boolean), and cancelable (boolean).


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

I have moved to a different location

check out my new home Flexout


September 2008
« Aug   Oct »

Blog Stat

  • 84,019 Hop's so far!!!

follow me


Linkedin Blogger Twitter Youtube Orkut

Top Clicks

  • None

latest flickr photos

top rated

%d bloggers like this: