Home Flex Flex Add Event Listener example

Flex Add Event Listener example
Posted on: September 9, 2008 at 12:00 AM

Example below shows the working of the addEventListener method. As per the name the method adds event listeners in flex components.

Flex addEventListener example

The example below shows the working of the addEventListener method . As the name suggests, the method adds events in flex components. Here in the example only mouse event is added in the components, so whenever a mouse click occurs on the components in which the events are added, an alert pop up window comes with some messages coded on it. Event listeners are the methods or functions in which events are added on the flex components or it can be said as event listeners handles the event that's why they are also called event handlers. Here in the example we have two event listener Handler and Handler1 respectively.
With addEventListener method events can be added onto the components indirectly inside the scripting tags, through the components id attribute or directly by defining in the mxml tag through click and initialize attributes or properties of the flex components.

Listener.mxml


<?xml version="1.0" encoding = 'utf-8'?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">



  <mx:Script>

  import mx.controls.Alert;

  

  public function Handler():void{

  b1.addEventListener(MouseEvent.CLICK, alertbox, false, 0); 

  }



  public function Handler1():void{

  t1.text = 'click event disabled ';

  b2.addEventListener(MouseEvent.CLICK, alertbox, true, 0);

  }



  public function alertbox(event:Event):void{

  Alert.show('click event occured');

  }



  </mx:Script> 



  <mx:Button id = 'b1' label = 'b1 control' click = 'Handler()'/>



  <mx:HBox>

  <mx:Button id = 'b2' label = 'b2 control' click = 'Handler1()'/>

  <mx:TextInput id = 't1' editable = 'false'/>

  </mx:HBox>



  <mx:Script>

  

  public function message(event:Event):void{

  Alert.show('welcome to Flex World');

  } 

  

  </mx:Script>



  <mx:HBox>

  <mx:Label text = 'TextInput t2'/>

  <mx:TextInput id = 't2' 

  click = 't2.addEventListener(MouseEvent.CLICK, message, true, 0);'

  editable = 'true'/> 

  </mx:HBox>



  <mx:HBox>

  <mx:Label text = 'TextInput t3'/>

  <mx:TextInput id = 't3' 

  click = 't3.addEventListener(MouseEvent.CLICK, message, false, 0);'

 editable = 'false'/>

  </mx:HBox>



</mx:Application>

Listener.swf

Download the code

Related Tags for Flex Add Event Listener example:
c, flex, com, list, event, components, method, component, name, listener, show, example, add, work, lex, exam, listeners, ws, sh, e, li, pe, dev, addeventlistener, dde, in, as, m, nt, dd, ad, working, listen, me, how, xa, xamp, s, eventlistener, k, is, mpl, tlist, s, s, th, sho, belo, st, ple, pl, on, om, o

«Previous Index Next»