Adding and removing event listeners in Flex

When you want to add an action to for example a button control in Flex, you can achieve this in two ways. Let’s suppose you want some action to be performed when user click’s on a button, you can code the function to be called by adding click attribute to Button tag, for example:

<mx:Button label="Button1" click="show_alert1()" id="button1"/> 

When user click button with Label Button1 the show_alert1 function will be executed. There is another way of adding click event to this button.

We can addEventListener to this button. For example we could execute the following code inside creationComplete function:

button1.addEventListener(MouseEvent.CLICK, show_alert1);

There is essentially no difference between the first option and the second option. Unless you want to at a later stage remove click event from this Button.

We can remove events in Flex with removeEventListener, which takes in two arguments (the same ones as addEventListener) and those are:

  • type:String (type of event we want to remove, or add
  • listener:Function (which listener function we want to remove or add)

One thing to remember is that you can only removeEventListener from a control where addEventListener was used. That means that if you add attribute click to Button control, you will not be able to remove click event from it with removeEventListener.

You can take a look at this simple script and see it in action: We have to rows of buttons, in the first row, Button1 had it’s click event added with atturibute click inside of it’s Button Tag, the button in the second row had its click event added with addEventListener.

You can first try and click both Button1 and Button2 buttons and you will see that with both there will be an Alert pop up showing. Now click the Remove Listener 1 button and click Button1 and you will see that Alert box will still show (removing this click event was not successful). Now click Remove Listener 2 button and then click Button 2 and Alert box will not be shown, which means we successfully removed click event from Button2 with removeEventListener.

Application can be found here: http://www.tdteam.com/work/engineeringtheworld/removeEventListener.swf

And it’s source:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" 
	backgroundColor="#FFFFFF" backgroundGradientColors="#FFFFFF #FFFFFF"
	width="400" height="400" creationComplete="add_listener()">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			private function add_listener():void{
				button2.addEventListener(MouseEvent.CLICK, show_alert2);
			}
			private function show_alert1():void{
				Alert.show('Button1 Clicked')
			}
			private function show_alert2(event:MouseEvent):void{
				Alert.show('Button2 Clicked');
			}
		]]>
	</mx:Script>
	<mx:Text text="Try to remove click event for the first and second button"/>
	<mx:HBox verticalGap="10">
		<mx:Button click="show_alert1()" id="button1" label="Button1"/> 
		<mx:Button click="button1.removeEventListener(MouseEvent.CLICK, show_alert1)" 
			label="Remove listener 1"/>
	</mx:HBox>
	<mx:HRule width="350"/>
	<mx:HBox verticalGap="10">
		<mx:Button id="button2" label="Button2"/> 
		<mx:Button click="button2.removeEventListener(MouseEvent.CLICK, show_alert2)" 
			label="Remove listener 2"/>
	</mx:HBox>
</mx:Application>
Advertisements

, ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: