Passing Additional Parameters with Events

[AfternoonDelite]

What's the best way to pass additional parameters with.. let's say.. a mouseclick?

So, for example... the user clicks on a button and I want to pass the value 10 along with it.. so, whenever the buttonClicked function is called it has that value to use.

I know that you can create custom events by making a subclass of the Event class. And I know that you can dispatch the custom events to where you can access additional parameters by doing something like:

dispatchEvent(new CustomEvent("action", 10)); 

CustomEvent's constructor would look something like:

public function CustomEvent(_type:String, _val:Number);
   super(type);
   val = _val;
} 

And later on you can access the val by doing something like:

function buttonClicked(evt:CustomEvent) {
   trace(evt.val);
} 

But in order to do that, you'd have to do something like:

button.addEventListener("buttonClick", buttonClicked);
dipatchEvent(new CustomEvent("buttonClick", 10)); 

You have to dispatch the event yourself in order to pass that extra parameter.

So, how could I pass parameters when the user actually does click on the button?

I've thought about just adding a regular MouseEvent.MOUSE_DOWN and dispatching the event from that function... but I lose the values that I need to pass through.

I've also thought about creating a local listener function.. something like

var val:uint = 10;
button.addEventListener(MouseEvent.MOUSE_DOWN, function buttonClicked(e:Event):void { dispatchEvent("buttonClick", val); }); 

Would that work, though? I can't test it out right now. Only brainstorming.

Any help is appreciated.

[illustratedlife]

Dispatching from the button is probably your best bet. You could have one of the args for your CustomEvent be the MouseEvent passed through. That is:

function CustomEvent(type:String, val:Number, OrigEvent:MouseEvent){

Then, you would dispatch the event in your handler:

function buttonClicked(e:MouseEvent){
     dispatchEvent(new CustomEvent("buttonClicked", 10, e));
}

You could also pass the properties you need into your CustomEvent

function buttonClicked(e:MouseEvent){
     var customEvent = new CustomEvent(buttonClicked, e.localX, val);
     dispatchEvent(customEvent);
}

Of course, you'd have to add the corresponding args for the values you're passing through to your CustomEvent class.

[AfternoonDelite]

That's a good idea with passing the MouseEvent into the CustomEvent as well. I didn't think of that.

My main problem now seems to be scope.. accessing the variables I want to pass through to the custom event.

I suppose I could try doing the local function used just to dispatch the custom event.

[illustratedlife]

At the top of your class, declare

private var _val:Number;

Then you'll have access to it in all Class functions (including buttonClicked).


I'd need to see more of your code to understand better how to help. =)

[AfternoonDelite]

Oh, I know.. I could do that.. It would just be kind of unnecessary.

As an example:

Say you have 10 buttons all stored in an array.

You want to loop through each button and assign a MouseEvent for the MouseEvent.MOUSE_DOWN

for(var i = 0; i < buttons.length; i++) {
   var button:Button = buttons[i];
   button.addEventListener(MouseEvent.MOUSE_DOWN, buttonClicked);
} 

I mean.. that would work all fine and dandy.

But, what if the button was just a property of an object and there was an array of objects. Let's just call them TestObjects for this example.

so:

for(var i = 0; i < testObjects.length; i++) {
   var button:Button = testObjects[i].button;
   button.addEventListener(MouseEvent.MOUSE_DOWN, buttonClicked);
} 

How would I know which button was clicked out of the array? I'm thinking I have to pass an index to the array. That way.. when the button is clicked.. the correct testObject can do whatever it needs to do.

Another example:

Say I have an array of Image objects who have filename, xpos, and ypos properties.

I'm looping through the array of Image objects and create a Loader and URLRequest to load the image from the filename. Once it's done loading, I want to move it's xpos and ypos. I'd have to pass the xpos and ypos along with the function.. but how would I do that? Again, I think I'd need a local function.

loader.contentLoaderInfo.addEventListener("imageLoaded");
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, function eventComplete(e:Event):void { dispatchEvent(new CustomEvent("imageLoaded", xpos, ypos); }); 

[illustratedlife]

i was unaware you would write a function inline with addEventListener like that. i thought you'd need to call an external function.

anyway, there is a MouseEvent.target property that will tell you which object was clicked on. so if you store your variables in the button (buttons[i].ypos), you can use event.target.ypos to access them.


also, use bubbling. rather than adding an event listener for each, store the buttons in a parent display object and add your event handling to the parent.

MainTimeline
-buttonHolder
--button1
--button2
--. . .
--buttonN

buttonHolder will receive events from its children. so buttonHolder.addEventListener is the same as button1.addEventListener . . . buttonN.addEventListener

[AfternoonDelite]

I was just trying to avoid having to create a new class and, instead, pass parameters accordingly. Because if I'm going to add properties, I'd rather create a strict class for the object.

Hm. I didn't know that. I'll give it a shot, thanks.

[illustratedlife]

i dont see a disadvantage to writing a button class. add the properties you need and nobody gets hurt =)

better than stressing about it. (i get in the same -how can i do this cleanly- thought process too, but it usually turns out if i followed my intuition i'd be in good shape)