Passing parameters to event listeners / handlers

Question

How do you pass parameters / variables through event listeners? I've overcome this problem fairly effectively using anonymous functions; which is an incredibly simple solution, but at the end of the day, it smells like a giant loophole for functionality that I feel should be provided natively anyways.

Normally life would go on, but as fate would have it, now I actually need to remove the listener, and doing so when you've using an anonymous function is a bit funky. So, once again, I'm trying to figure out how to pass parameters through to event listeners so that the event listeners can be removed by simply referencing the function.

As odd as it may seem, I've overcome this issue as well, BUT, I don't like it and tired of using it. In my opinion it is code smell. But it works like a charm. I store the variable, object or whatever on the dispatching MovieClip. So, if I'm looping though an array of data, generating thumbnails on the fly, I simply store the data variable (normally an object with multiple properties) in the actual thumbnail MovieClip. Then I can access all the data in an event listener method by referencing:

event.target.data

. In this example, "data" is the name of the variable holding holding the information I want. Because another issue that crops up when I don't use this is, is that when I'm looping through an array and generating thumbnails that click to view large images, the index is not consistent. At the end of the loop, ALL the thumbails will all open an image using the last index of "i". So if I had an array with a length of 12, they'd all load the 12th image regardless of what thumbnail you clicked on. Storing the data into the MovieClip itself, creates a solid reference that never changes.

This has been bothering me for some time now. Basically what I want to know is, is this good practice, are there better solutions out there?

Below are some diet examples. I can post more detailed examples if necessary. All examples depict a thumbnail that loads a large image when clicked.

Without the use of an anonymous function (the problem):

tempThumb.addEventListener(MouseEvent.CLICK, loadImage);

public function loadImage(_event:MouseEvent):void  
{
    // I don't have the variable _url and preparing a hot bath with a cold blade  
}

Use of an anonymous function:

tempThumb.addEventListener(MouseEvent.CLICK, function(_event:MouseEvent) { loadImage("large.jpg"); } );

public function loadImage(_url:String):void  
{
    // I got the variable _url and packing away the razor blades  
}

Without the use of an anonymous function, but using my smelly Leprechaun technique of storing the data into the MovieClip dispatching the event

tempThumb.data = "large.jpg";

tempThumb.addEventListener(MouseEvent.CLICK, loadImage);

public function loadImage(_event:MouseEvent):void  
{
    trace(event.target.data);
    // I can access the variable  
}

I'm not clued up on programming terminology, so I've dubbed the above the Leprechaun Technique. Storing / hiding variables in objects for later use / access. It solves all my problems and works amazingly well. But, if there is a better way to do it, I want to know that way.

Answer 1

Yes I know what you mean. What I do is to extend the event and so dispatch a custom event. This way I can create properties in the custom event that contain the necessary data. It seems clean but does require a bit of effort. It is not ideal but I don't know of a significantly better way.