Search Flex Components Free

Custom Search

December 27, 2007

Event Bubbling in Flex

Event bubbling:
The mechanism through which event objects are passed from the objects that generates an event up through the containership hierarchy .this architecture allows you to capture events at any level of application.Not just the object that generates an event but any of its containers.

event.target & event.currentTarget

// EventBubbling.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”
http://www.blogger.com/ ” layout=”vertical”>
<mx:Script>
<![CDATA[
private function btnClick(event:MouseEvent):void{
TXT.text=”Target:::”+event.target+”\n”;
}
]]>
</mx:Script>
<mx:VBox id=”VBOX” paddingBottom=”15″ paddingTop=”15″ paddingLeft=”15″ paddingRight=”15″ backgroundColor=”0xFFFFFF”>
<mx:Button id=”BTN” click=”btnClick(event)” label=”Click Me”/>
</mx:VBox>
<mx:TextArea id=”TXT” width=”300″ height=”200″/>
</mx:Application>

// Output is: whenever you clicked the button you'll get:
Target:::BTN
Target:::BTN
Target:::BTN

// EventBubbling.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”
http://www.blogger.com/ ” layout=”vertical” click=”btnClick(event)”>
<mx:Script>
<![CDATA[
private function btnClick(event:MouseEvent):void{
TXT.text=”Target:::”+event.target+”\n”+”Current Target:::”+event.currentTarget.id+”\n”;
}
]]>
</mx:Script>
<mx:VBox id=”VBOX” paddingBottom=”15″ paddingTop=”15″ paddingLeft=”15″ paddingRight=”15″
backgroundColor=”0xFFFFFF” click=”btnClick(event)”>
<mx:Button id=”BTN” click=”btnClick(event)” label=”Click Me”/>
</mx:VBox>
<mx:TextArea id=”TXT” width=”300″ height=”200″/>
</mx:Application>

// Output is:
Target:::BTN
Current Target:::BTN
Target:::BTN
Current Target:::VBOX
Target:::BTN
Current Target:::EventBubbling (name of the application)


Related Flex Tutorials