So you’ve decided anonymous functions aren’t for you. Congratulations, you’ve decided correctly! But that doesn’t help you on your way to really dynamic listeners. What other options are available to you?

Method 2 – Using Variables

The next step up the ladder from anonymous functions is to just use an external variable. By external, I mean that this variable must be created outside of the listener, and outside of the function it’s calling. Take this example:

//this is declared at the top of the class
private var output:String = "Button 1 pressed!";
 
//this is declared in the constructor, or another function
myButton.addEventListener(MouseEvent.CLICK, outputText);
 
//this is our output function, without 'str' parameter, as it's no longer needed
function outputText(evt:MouseEvent):void {
  trace(output);
}

This example would output the text “Button 1 pressed!” as seen at the top. Unfortunately this isn’t the most dynamic way of doing things, as it requires that you set up the variable to read different things depending on what you want output. That’s no good to us, as we’re trying to use one function on a number of different listeners to achieve different results. The alternative that would work for us is storing the string on the button itself. If we have access to ‘myButton’s class, we can add a ‘textToDisplay’ property to it, and set it individually on each button, then use event.target to access that information in out output function.

So in the myButton class, we would add a public property like this:

public var textToDisplay:String = "Default";

By giving it a default value in the class, we can ensure that it will never return null. Then in our code, when we are adding in the buttons, we can set the textToDisplay property on each one:

myButton1.textToDisplay = "Button 1 pressed!";
myButton2.textToDisplay = "Button 2 pressed!";

Then we add the listener – the same listener syntax to each button:

myButton1.addEventListener(MouseEvent.CLICK, outputText);
myButton2.addEventListener(MouseEvent.CLICK, outputText);

And in our output function, we use event.target to display the correct text:

function outputText(evt:MouseEvent):void {
  trace(evt.target.textToDisplay);
}

This code would give us different output depending on which button was clicked. If button 1 was the target of the click event, it would output “Button 1 pressed!”, as that is the value of the textToDisplay property on that button. The same reason would output “Button 2 pressed!”, if button 2 was the target.

So that’s the second method of passing information to a function from a listener. A bit of a cop-out  as you’re not really passing parameters to the function per se – and not always viable as you can’t change the variable in the class, or don’t have access to a custom class for your event targets – but a lot more manageable than anonymous functions.

Tune in next time when we’ll be moving on to using an intermediary function to pass information.