Flex Event Handling - Adobe Flex

What is event handling in flex?

Flex uses a concept of event for passing data from one object to another object based on the state or user interaction within the application.

ActionScript has a generic Event class which defines most of the functionality required to work with events. Each time an event occurs within a Flex application, three types of objects will be created from the Event class hierarchy.

Event has the below 3 key properties




type defines what kind of event just happened. This may be click, initialize, mouseover, change, etc. Actual values will be represented by constants like MouseEvent.CLICK.


target property of Event is an object reference to the component which generated the event. If a Button with an id of clickMeButton is clicked, then target of that click event will be clickMeButton


currentTarget property varies with container hierarchy and it mainly deals with flow of events.

Event Flow Phases

An event goes through 3 phases looking for event handlers




During capture phase, program starts looking for event handlers from outside (or top) parent to the innermost one. Capture phase stops at the parent of the object that triggered the event.


During target phase, component that triggered the event will be checked for an event handler.


Bubble phase is repeal of capture phase, which works back through the structure, from the target component's parent on top.

Consider below application code

If a user clicks the Button, it means that they have also clicked the Panel and the Application. Event goes through 3 phases looking for event-handler assignments.

flex phases

Below are the steps to test event handing in a Flex application:




Create a project with a name HelloWorld under a package com.wisdomjobs.client


Modify HelloWorld.mxml as explained below and skip rest of the files.


Compile and run the application to make sure business logic is working as per the requirements.

Below is the content of the modified mxml file src/com.wisdomjobs/HelloWorld.mxml.

After all the changes are done, compile and run the application in normal mode as we did in Flex - Create Application chapter. If everything works fine in the application, it produces below output.

event handling

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Adobe Flex Topics