Flex event Listeners
Flex Event listeners, which are also called event handlers, are functions that Flash Player and AIR execute in response to specific events. Adding an event listener is a two-step process.
First, you create a function or class method for Flash Player or AIR to execute in response to the event. This is sometimes called the listener function or the event handler function.
Second, you use the addEventListener() method to register your listener function with the target of the event or any display list object that lies along the appropriate event flow.
The following code snippet shows a flex event listener example , simple event listener function that reports when a button triggers the event that it is listening for:
Flex event listeners
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationcomplete="initApp()">
<fx:script>
import mx.controls.Alert;
<![CDATA[
private function initApp():void
{
<strong>btn.addEventListener(MouseEvent.CLICK,myEvent);</strong>
}
protected function myEvent(event:Event):void
{
Alert.show("An Event occured");
}
]]>
</fx:script>
<fx:Declaration>
</fx:devlaration>
<s:Button id="btn" label="Click Me"/>
</s:Application>
You can see in the previous example, you also register that function or class method witha display list object by using
the addEventListener() method.
Instead of that we can directly call the myEvent function from button click attribute of the <mx:Button> tag:
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:script>
import mx.controls.Alert;
<![CDATA[
protected function myEvent(event:Event):void
{
Alert.show("An Event occured");
}
]]>
</fx:script>
<fx:Declaration>
</fx:devlaration>
<strong><s:Button id="btn" label="Click Me" Click="myEvent(event)"/></strong>
</s:Application>
This method equivalent to the addEventListener() method in the previous example, but it is a better practice to use addEventListener() method.This method gives you greater control over the event by letting you configure the priority and capturing settings, and use event constants.
In addition, if you use addEventListener() to add an event handler, you can use removeEventListener() to remove the handler when you no longer need it. If you add an event handler inline, you cannot call removeEventListener() on that handler.
Each time a control generates an event, Flex creates an Event object that contains information about that event, including the type of event and a reference to the dispatching control. To use the Event object, you specify it as a parameter in the event handler function, as the following example shows:
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:script>
import mx.controls.Alert;
<![CDATA[
protected function myEvent(event:Event):void
{
<strong>Alert.show("An Event of type"+event.type+"occured");</strong>
}
]]>
</fx:script>
<fx:Declaration>
</fx:devlaration>
<s:Button id="btn" label="Click Me" Click="myEvent(event)"/>
</s:Application>
Specifying the event object- Flex event listeners
You specify the object in a listener function signature as type Event, as the following example shows:
function myEventListener(e:Event):void { … }
However, if you want to access properties that are specific to the type of event that was dispatched, you must instead specify a more specific event type, such as ToolTipEvent or SQLEvent, as the following example shows:
function myEventListener(e:SQLEvent):void { … }
The event object defines several properties that you can access in any flex event listeners function:
- bubbles
Indicates whether an event is a bubbling event; that is, whether it will be redispatched from the object that has received it to any listeners further up the event chain.
- cancelable
Indicates whether the behavior associated with the event can be prevented.
- currentTarget
Indicates the object that is actively processing the event object with an event listener.
- eventPhase
Identifies the current phase in the event flow.
- Target
Specifies the event target, which is the object that has dispatched the event.
- Type
Indicates the type of event.
In this tutorial we discussed about flex event listeners in the next post we will discuss initialization , pre initialization, creationcomplete , target and current Target in detail.
Flex – preinitialize, initialize and creationcomplete | Adobe Flex Tutorial #6
