Flex EventListener

Flex Framework-EventListener

Introduction:

                       

The addEventListener method is used to add event to Flex UI components. Already we have seen how to create UI components. Now we add event to the UI components.

Step 1:

We create textinput UI components.

Step 2:

Add eventlistener to TextInput UI components.

Syntax:

            AddEventListener(type of event,function,usecapture(true or false),priority(0);

Step 3:

Add the following coding into the mxml application.

< ?xml version="1.0" encoding="utf-8"? >
< 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" minWidth="955" minHeight="600" >

< fx:Script >
< ![CDATA[
protected function ok_clickHandler(event:MouseEvent):void
{
ok.addEventListener(MouseEvent.CLICK,mes,false,0);

}
]] >
< /fx:Script >
< fx:Script >
< ![CDATA[
import mx.controls.Alert;
public function mes(event:Event):void
{
Alert.show("Hello You Clicked On TextInput");
}
]] >
< /fx:Script >

< fx:Declarations >
< /fx:Declarations >
< mx:Panel title="Event Listener" height="400" width="400" layout="absolute" >

< mx:Canvas >

< mx:TextInput id="ok" click="ok_clickHandler(event)"/ >

< /mx:Canvas >
< /mx:Panel >
< /s:Application >

Explain:

Textinput box will displayed.

You click the mouse on the textinput.

The click event occurred and the control will go to the ok_clickHandler() function which occur between < fx:Script > and < / fx:Script &gt.

Within the ok_clickHandler() function, we add EventListener to the textinput. Like below

ok.addEventListener(MouseEvent.CLICK,mes,false,0);

ok is the id of the textinput.

We add MouseEvent.Click.

We click on the Textinput and mes() function will called.

public function mes(event:Event):void
{
Alert.show("Hello You Clicked On TextInput");
}
we use Alert class with show method.