3 Replies Latest reply on Aug 24, 2010 9:37 PM by John Hall

    Can't remove event listener from Image

    BRebey Level 1

      I'm clearly missing something and would appreciate some help.  I'm trying to run an event handler when an Image completes loading,  then remove the handler so that it won't  run again should the image be reloaded later.


      The problem that I'm having is that the event handler simply wont' go away, despite calling removeEventListener on the Image object.


      The following example demonstrates the problem (the example doesn't actually do anything useful...it's just the shortest example to demonstrate the problem).  (To run the  app, you'll have to provide any ol' JPEG file named "myImage.jpg" in the "src" directory of your project).


      What I expect to happen is :

           1) on startup, the image loads and loadComplete() runs.

           2)  loadComplete removes the event Listener so that subsequent re-loads won't re-fire the handler.  I only want the handler to  run once.

           3) "loadComplete" shoudl  be displayed in the Debug console.

           4) A button click should display only "Changing  Image" in the Debug console


      What I get instead is that the loadComplete handler isn't  removed, and every  time I click the button, loadComplete runs when the image is re-loaded   (i.e., every button click results in both "Change Image" AND "loadComplete"  being displayed in the Debug console).



      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
          <mx:Image width="655" height="181" source="myImage.jpg" id="myImage" autoLoad="true" scaleContent="true" complete="loadComplete()" x="100" y="100"/>
          <mx:Button x="100" y="341" label="Button" click="click(event)"/>
                  private function loadComplete():void
                      trace ("loadComplete");
                      myImage.removeEventListener("complete", loadComplete);
                  private function click(evt:Event):void
                      trace ("Changing Image");
                      myImage.load("myImage.jpg");    //  Reload same image; it's just an example

        • 1. Re: Can't remove event listener from Image
          Subeesh Arakkan Level 4



          You can remove only event listeners that you added with the addEventListener() method in an ActionScript block. You cannot remove an event listener  that was defined in the MXML tag, even if it was registered using a call  to the addEventListener()method that was made inside a tag attribute.


          Check this page for reference.




          You can modify the code a bit a get it working


          <mx:Image width="655" height="181" id="myImage" scaleContent="true" 
                    x="100" y="100"
          private function myImage_creationCompleteHandler(event:FlexEvent):void
          private function myImage_completeHandler(event:Event):void
          • 2. Re: Can't remove event listener from Image
            BRebey Level 1

            I wasted HOURS trying in vain to figure out what was wrong!  Thanks for the solution;  I know it doesn't look like much in this trivial example, but your explanation and solution works perfectly for my real application.   Thanks so mcuh for your time.  That is a VERY strange quirk of Flex in my book.   I can't imagine why it's designed that way, but now that I'm aware, it'll be  easy to avoid this problem  in the future. 


            Thanks again!

            • 3. Re: Can't remove event listener from Image
              John Hall Level 4

              On a similar topic, Elad's post is kind of interesting. http://tinyurl.com/25rp86t