Dynamically assigning event listeners to movie clips? (Canvas)

[anton9800]

Hello!  I am trying to come up with a way to dynamically assign "click" event listeners to a number of movie clips.

the movie clips are arranged in the following manner:

ParentMovieClip

|_	childMovieClip_1
	childMovieClip_2
	childMovieClip_3

my current approach is this:

1. iterate through a parentMovieClip and push all of its children inside an array (that gives me a number of objects I'll turn into buttons).

2. iterate through the array, and assign a name inside the parent movie clip to a temporary variable, then assign event listeners to it.  The code is below:

        // temporary variable holding address of current movie clip

for (var i = 0; i < movieClipArray.length; i++) {              

    var tempVariable = "this.parentMovieClip.childMovieClip_" + (i+1);

// here I assign listeners to movieclip.  This does turn my childMovieClips into buttons, but I cannot distinguish which clip was clicked using a switch or an if statement, since there are no attributes to check for

     eval(tempVariable).addEventListener("click", clickHandler.bind(this));             

              // this gives me an actual object, though it's lacking all attributes except for ID

   var tempObject = eval(tempOpenPopup);  

               // so I assign a name to it manually, in hopes of being able to tell the buttons apart when I click them

    tempObject.name = i.toString();

             // but I cannot figure out a way to assign an event listener to this tempObject.

}

So, while I am partially successful, I am out of ideas as to how to distinguish between which movie clip was clicked, as the name is not being passed.  Any ideas would be greatly appreciated!

Thank you!

[UDESCO]

You can set the name properties as well while assigning the event listeners and check for the same in the handler function.

eval(tempVariable).name = tempVariable;

[ClayUUID · Accepted solution]

Do NOT use eval(). The correct way to access property names by variable in JavaScript is with bracket notation:

this.parentMovieClip["childMovieClip_" + i];

As for telling which clip was clicked, that's exactly what the event object is for.

function myClickHandler(e) {

     alert(e.currentTarget);

}

EaselJS v0.8.2 API Documentation : MouseEvent

[anton9800]

Thank you!  the e.currentTarget still returns name=null, so I still had to assign a name to it manually, but this works great!

out of curiosity - why should eval() be avoided?

[Colin Holgate]

In createjs movieclip name property doesn't work. You could assign your own variable to the movieclip, to get the same end result.

[ClayUUID]

anton9800 wrote:

out of curiosity - why should eval() be avoided?

In this case, because it's pointless complexity. In general, because 1) It prevents code from being optimized or pre-compiled by the browser, and 2) It allows execution of arbitrary code.

The .name property of movieclips is not populated in Animate, apparently to save file space. This can be worked around by manually assigning to it, or by using the code described here:

Re: HTML Canvas instance names - Good tricks to getting them?

But you shouldn't need the instance name in most cases, unless you're displaying it to the user. The object reference returned by currentTarget should be enough.