Wednesday, April 15, 2009

How to Pass Additional Parameters to AS3 Event Handler Functions

I've recently made the leap to AS3, and one of the very first questions I wondered about was how I could pass extra arguments to event listener functions. From what I understand, event listener functions in AS3 can only have one parameter, which is for the event object that gets passed when the event is triggered. I did some searching and found an article by Rich Schupe that explains a few different methods on how one can pass arguments with events in AS3. He focuses mainly on teaching the reader how to create a custom event class in order to address the issue at hand. But as I've mentioned earlier, he does provide other methods as well (that do not require the creation of a custom class). And if you continue reading through the article's comments, Jonathan Ross offers up another simple alternative that involves nesting the event listener function within a function and passing the arguments through the containing function:
function someFunction(arg1, arg2, arg3...):returnType
{
     // Use the arguments anyhwere within the function body
     eventSource.addEventListener(EventType.EVENT_NAME, listenerFunction);

     function listenerFunction(e:EventType):void
     {
          // do something
     }
}

someFunction(arg1, arg2, arg3...);

Example:
function initButtons(_btn:SimpleButton, greeting:String):void
{
     _btn.addEventListener(MouseEvent.CLICK, greetPerson);

     function greetPerson(e:MouseEvent):void
     {
          trace(greeting);
     }
}

initButtons(_btn1, "Hi, John!");
initButtons(_btn2, "Hi, Mary!");
initButtons(_btn3, "Hi, Linda!");

Which method to use really depends on your knowledge in AS3 and the requirements of your project.

3 comments:

  1. Try to do your function like this:

    function initButtons(_btn:SimpleButton, greeting:String):Function {
    return function(e:MouseEvent):void {
    trace(greeting);
    };
    }

    And use it like this:

    var greetPerson:Function = initButtons(_btn1, "Hi, John!");
    stage.addEventListener(MouseEvent.CLICK, initButtons(_btn1, greetPerson));
    //stage.removeEventListener(MouseEvent.CLICK, initButtons(_btn1, greetPerson));

    Or just directly:

    stage.addEventListener(MouseEvent.CLICK, initButtons(_btn1, "Hi, John!"));
    stage.addEventListener(MouseEvent.CLICK, initButtons(_btn1, "Hi, Mary!"));
    stage.addEventListener(MouseEvent.CLICK, initButtons(_btn1, "Hi, Linda!"));

    ReplyDelete
    Replies
    1. I think that by

      stage.addEventListener(MouseEvent.CLICK, initButtons(_btn1, greetPerson));
      //stage.removeEventListener(MouseEvent.CLICK, initButtons(_btn1, greetPerson));

      you meant

      stage.addEventListener(MouseEvent.CLICK, greetPerson);
      //stage.removeEventListener(MouseEvent.CLICK, greetPerson);

      Delete
    2. You're correct, sorry for the mistake. It should be:


      Try to do your function like this:

      function initButtons(_btn:SimpleButton, greeting:String):Function {
      return function(e:MouseEvent):void {
      trace(greeting);
      };
      }

      And use it like this:

      var greetPerson:Function = initButtons(_btn1, "Hi, John!");
      stage.addEventListener(MouseEvent.CLICK, greetPerson);
      //stage.removeEventListener(MouseEvent.CLICK, greetPerson);

      Or just directly:

      stage.addEventListener(MouseEvent.CLICK, initButtons(_btn1, "Hi, John!"));
      stage.addEventListener(MouseEvent.CLICK, initButtons(_btn1, "Hi, Mary!"));
      stage.addEventListener(MouseEvent.CLICK, initButtons(_btn1, "Hi, Linda!"));

      Delete