Friday, April 29, 2011

Remove Event Listeners

Flex adds event listeners either inline (inside mx tags) or in functions inside script block.
The ways we remove added listeners for the event is same as the way we have added it.
i.e first, we need to call the removeEventListener on that component/container by passing all the parameters
which we passed while calling the addEventListener for the same component/container.
this may be just 2 required parameters as shown below:

comp_id.removeEventListener(eventType:EVENT_TYPE,removeHandlerFunction)

and then finally, we need to define the removeHandlerFunction which expects the same event type that we passed
as EVENT_TYPE in the above method and perform the logic there:

private function removeHandlerFunction(eventType:EVENT_TYPE):void {
....
}

But there is 1 difference in how the event listeners are removed.
If we have added any event listener inline (i.e. inside <mx:> tag for the component or container),
then even calling removeEventListener won't remove it.

However, all the events which are added through addEventListeners (inside script block) can be removed
using the removeEventListener

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="createHandler(event)">
<mx:Script>
<![CDATA[
import mx.controls.Alert;

private function createHandler(event:Event):void {
b1.addEventListener(MouseEvent.CLICK,myClickHandler);
}

private function removeMyHandlers(event:Event):void {
Alert.show("Removing listener for Button 1");
/* Remove listener for b1's click event because it was added with the addEventListener() method */
b1.removeEventListener(MouseEvent.CLICK,myClickHandler);

/* Does NOT remove the listener for b2's click event because it was added inline i.e in MXML tag */
b2.removeEventListener(MouseEvent.CLICK,myClickHandler);
}

private function myClickHandler(event:Event):void {
Alert.show("The button was clicked");
}
]]>
</mx:Script>

<mx:Button id="b1" label="Click Me (Button 1)" />
<mx:Button id="b2" label="Click Me (Button 2)" click="myClickHandler(event)"/>
<mx:Button id="b3" label="Remove Event Listeners" click="removeMyHandlers(event)"/>
</mx:Application>


In the above example, first try to click button b1. You will see and Alert box saying "The button was clicked". Then, try same for Button b2. You will again see the same output.
Then, try to click the 'Remove Event Listeners' button. This button removes the event listener for b1
since it was added using the addEventListener. But for b2, it does not removes the event listener even though we called the b2.removeEventListener too.

After clicking on the third button, again try to click b1. The alert won't be displayed as it has already removed the listener for this button's click event and hence, it does not call myClickHandler.
However, b2 is still having its listener active and hence its click handler function myClickHandler executes and alert gets displayed on click on b2.

No comments:

Post a Comment