Event Propagation in Flex

Event Propagation

Terms to know: event.target: The target property refers to the dispatcher of the event event.currentTarget: The currentTarget property refers to the current object that is processing the event eventType: Type of event broadcast by the object when an event occurs and what is being listened for by the event handler event listener: The function or class method that you write to respond to specific events. They're also known as event handlers. There are three phases in event propagation where Flex looks for event listeners: 1. Capturing phase: Flex checks to see which ancestors are registered as listener's for the event starting from the root application object to the direct ancestor of the target 2. Targeting phase: Flex invokes the target's event listeners 3. Bubbling phase: Each registered listener is given a chance to handle the event starting from the direct ancestor of the target to the root application object. Even propagation Video Tutorial: You can see the following video to understand event propagation graphically. It is a good which tells u deeply about phases of the events. http://www.adobe.com/devnet/flex/videotraining/_jcr_content/bodycontent1/modal_14.content.html

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    name="DemoApplication"
    backgroundColor="#FFFFFF"
    backgroundAlpha="0"
    creationComplete="initApp()"
    click="myHandleClick(event)"
    >

    <mx:Script>
        <![CDATA[
            import flash.events.EventPhase
            import mx.controls.Alert;

            private function initApp():void {
                myVBox.addEventListener("click", myHandleClick);
            }

            private function myHandleClick(event:Event):void {
                label1.text = "You clicked on " + event.target + "\n" + "Current event phase is " + getPhaseName(event.eventPhase) + "\n" + "Current target is " +    event.currentTarget
            }

            private function getPhaseName(phase:uint):String {
                switch(phase) {
                    case 1:
                        return "CAPTURING PHASE";
                    case 2:
                        return "AT TARGET PHASE";
                    case 3:
                        return "BUBBLING PHASE";
                }
                return "";
            }
        ]]>
    </mx:Script>
    <mx:Label text="Application"/>

    <mx:VBox id="myVBox"
        backgroundColor="#FFCCCC"
        width="300" height="100"
        horizontalAlign="center">

        <mx:Label text="VBox"/>

        <mx:Button id="myButton"
         label="Create Click Event"
         click="myHandleClick(event)" />

    </mx:VBox>
    <mx:Label id="label1"
        width="80%" height="48"
        fontWeight="bold" />

</mx:Application>

Rendered Example