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.

User rating?	1 2 3 4 5

Learn more

<?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>

Resources

Event Propagation

Learn more

Rendered Example