How to add event listeners to an array of objects

Question

I have an array of objects (specifically easelJS images) - something like this:

var imageArray = new Array; gShape  = new createjs.Shape(); // shape is something imageArray.push(gShape); 

What I want to do is have an event listener instead of:

gShape.addEventListener("click", function() {alert"stuff"}); 

I want the program to know specifically which region is clicked so that I can send an alert box in the following way:

imageArray[index].addEventListener("click", function(){     alert " you clicked region number " + index} 

Answer 1

Sure. You can just use a closure to save the index of that iteration. Otherwise there are shared by the same function scope and will give you the value of the same iteration. Creating a separate function for each will save the state of that inside the function.

var imageArray = new Array; gShape = new createjs.Shape();  // shape is something  imageArray.push(gShape); // Dumped all the objects  for (var i = 0; i < imageArray.length; i++) {    (function(index) {         imageArray[index].addEventListener("click", function() {            console.log("you clicked region number " + index);          })    })(i); } 

or better

 for(var i = 0; i < imageArray.length; i++) {        imageArray[i].addEventListener("click", bindClick(i));  }   function bindClick(i) {     return function() {         console.log("you clicked region number " + i);     };  } 

ES6 to the rescue

let imageArray = []; gShape = new createjs.Shape(); // shape is something imageArray.push(gShape); // Dumped all the objects  for (let i = 0; i < imageArray.length; i++) {   imageArray[i].addEventListener("click", function() {     console.log("you clicked region number " + i);   }); } 

Using the let keyword creates a block scoping for the variable in iteration and will have the correct index when the event handler is invoked.