how to use a parameter with addeventlistener

[vtxr1300]

In as2 we had on (release){....} to handle a button click. Now we use btn.addEventListener(MouseEvent.CLICK, functionname). How can I use a parameter with the function defined. I have 4 buttons in my movie that all call the same click function but I want them to be able to pass a parameter into that function. How do I do that with addEventListener? Thanks.

[r_critchlow]

There are several ways to approach what you are doing. Give me more details and we can narrow down the choices.

[vtxr1300]

I have 4 products and as they click each product button it loads a larger image. There is also a buy it now button. So, when they click one of the 4 product buttons I need to load the correct image and assign the url to the buy it now button. So, I have one button click function that I want to pass in 2 parameters to.

[r_critchlow]

I think you are saying you have four buttons, each with its own instance name and event listener. Each listener calls the same function. That being the case, you can reference the button name that was clicked instead of passing a parameter.

For example:

I have four buttons on the screen called product1_btn, profuct2_btn, etc.
I have four event listeners something like product1_btn.addEventListener(MouseEvent.CLICK, clickFunction);

Now, there are two basic ways to approach this:
Method 1: You can change the reference to clickFunction to four separate functions and write the functions as:

function prod1Click(event.MouseEvent):void{
productClick(1, "product1.jpg");
}
function prod2Click(event.MouseEvent):void{
productClick(2, "product2.jpg");
}
function productClick(myProduct:int, myImage:String):void{
// Do your thing here.
}

The second method would be to reference the name of the button clicked in your function and use a conditional statement to perform the action.

function productClick(event:MouseEvent):void{
var whosClicked:String = this.name;
trace(whosClicked); // Displays product1_btn, product2_btn, etc.
}

There is a third, more advanced method you can use which is to create a display object container and place all of your buttons in the container. From there you can reference the index number of the button clicked, then select your image from an array. If you want to go that way, let me know and I'll get you a sample of the code.

[vtxr1300]

Thanks very much. I usually used the first method you illustrated but I was hoping there was a way to actually pass parameters to the eventlistener function so that I didn't have to define a unique event listener function for each button. I know your 2nd method only uses one, but it still isn't as elegant a solution as being able to pass parameters because you have to do a bunch of conditional logic. Oh well, no biggie. Thanks again.

[r_critchlow]

There is actually an error in my second method, so you can't use that until I get the reference to the clicked button correct anyhow. 🙂 Sorry.

[Damon Edwards]

function productClick(event:MouseEvent):void{
var whosClicked:String = this.name;
trace(whosClicked); // Displays product1_btn, product2_btn, etc.
}

will not work as you want it to. It will return root1 root2 based on number of stage instances and if its on the root stage or not. You could end up with terrible scope issues.


function productClick(event:MouseEvent):void{
trace(event.currentTarget.name); // will return the instance names
if (event.currentTarget.name == "product1_btn"){
// do something
}
if (event.currentTarget.name == "product2_btn"){
// do something
}
// etc..
}

[r_critchlow]

Thanks Damon, I was just getting ready to paste that code.

Product1_btn.addEventListener(MouseEvent.CLICK, productClick);
Product2_btn.addEventListener(MouseEvent.CLICK, productClick);
Product3_btn.addEventListener(MouseEvent.CLICK, productClick);
Product4_btn.addEventListener(MouseEvent.CLICK, productClick);

function productClick(event:MouseEvent):void{
trace(event.currentTarget.name);
}

[vorpal]

So the only way to pass a parameter to the "addListerner callback function" seems to use the Event target as reference?

[Jamesabth]

Product1_btn.addEventListener(MouseEvent.CLICK, productClick);
Product2_btn.addEventListener(MouseEvent.CLICK, productClick);
Product3_btn.addEventListener(MouseEvent.CLICK, productClick);
Product4_btn.addEventListener(MouseEvent.CLICK, productClick);

function productClick(event:MouseEvent):void {
trace(event.currentTarget.name.substr(0,event.currentTarget.name.indexOf("_btn"))); //Outputs Product1, Product2 etc...
}


You could also make the buttons insances of a custom class that dispatches a custom event when it is clicked, but this will probably overcomplicate things in this case.