如何将事件侦听器添加到对象数组

Question

我有一个对象数组(特别是easelJS图像) - 像这样:

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

我想要做的是有一个事件监听器,而不是:

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

我希望程序明确知道单击了哪个区域,以便我可以通过以下方式发送警告框:

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

Answer 1

当然.您可以使用闭包来保存该迭代的索引.否则,由相同的函数作用域共享,并为您提供相同迭代的值.为每个函数创建一个单独的函数将保存函数内部的状态.

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);
}

或更好

 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来救援

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);
  });
}

使用let关键字在迭代中为变量创建块范围,并在调用事件处理程序时具有正确的索引.

Answer 2

这样的事情应该有效:

for (var i = 0 ; i < imageArray.length ; ++i) {
    function(index) {
        imageArray[index].addEventListener("click", function() {
            alert ("You clicked region number: " + index");
        });
    } ( i);
}

它起作用的原因是因为它创建了一个闭包,其中包含的值index将显示在警报消息中.每次循环都会创建另一个包含另一个值的闭包index.