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

我有一个对象数组（特别是

easelJS

images）-类似这样：

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}

---

像这样的方法应该会奏效：

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

for（变量i=0；i

---

它工作的原因是因为它创建了一个包含

索引

值的闭包，该值将显示在警报消息中。每次通过循环都会创建另一个包含另一个

索引
值的闭包。当然可以。您只需使用闭包保存该迭代的索引。否则，它们将由相同的用户共享函数的作用域，并将为您提供相同迭代的值。为每个迭代创建单独的函数将在函数内保存该函数的状态

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

var-imageArray=新数组；
gShape=newcreatejs.Shape（）；
//形状很重要
imageArray.push（gShape）；//转储所有对象
对于（var i=0；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);
    };
 }

for（var i=0；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);
  });
}

让imageArray=[]；
gShape=newcreatejs.Shape（）；
//形状很重要
imageArray.push（gShape）；//转储所有对象
for（设i=0；i

使用
let
关键字在迭代中为变量创建块作用域，并在调用事件处理程序时具有正确的索引。
当然，闭包是解决方案，但既然他加载了Ext，他也可以使用它并获得一些非常可读的代码。索引作为第二个参数传递给
Ext.Array.each
（别名为
Ext.each
）

这是我用于
div
id的：

var array = ['all', 'what', 'you', 'want'];

function fName () {
    for (var i = 0; i < array.length; i++)
    document.getElementById(array[i]).addEventListener('click', eventFunction);
};

var数组=['all'，'what'，'you'，'want']；
函数fName（）{
对于（var i=0；i

祝你好运！
你想要的和你拥有的有什么不同？它应该会起作用。你试过了吗？@Jeffman它看起来像是在一个循环中，
index
在callbackAh中是不正确的。我被“region”这个词挂断了“事实并非如此，显然，在我将一个对象推入数组之前，我只是想添加eventListeners。我今天早上才注意到它。。。我觉得我的语法错了。。。这个问题毫无意义。。但是谢谢所有的答案！！！欢迎您做任何事情，但我只想删除第一个示例。这不仅是其他答案所拥有的，我认为当你可以使用像你的第二个答案这样更干净、更高效的东西时，它真的不应该被使用example@Ian.. 我同意你的看法。。但在某些情况下，用户可能无法理解它的实际工作原理，除非看到详细的示例。。这就是我省略第一个例子的原因，这样他们就可以比较第一个例子是如何以更干净的方式编写的Hanks@Sushanth--，但是很高兴看到两个同时出现。可能有人没有检查时间戳，以为你复制了上面的答案。
//gShape must be an array of HTMLElement
gShape.forEach(element => element.addEventListener("click", function () {
    // this, refers to the current element.
    alert ("You clicked region number: " + this.getAttribute('data-region'));
}));

//gShape must be an array of HTMLElement
gShape.forEach(element => element.addEventListener("click", function () {
    // this, refers to the current element.
    alert ("You clicked region number: " + this.getAttribute('data-region'));
}));