javascript - 如何将事件监听器添加到对象数组

我有一个对象数组(特别是 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}

最佳答案

当然。您可以只使用闭包来保存该迭代的索引。否则有由相同的函数范围共享并且会给你相同迭代的值。为每个函数创建一个单独的函数将保存函数内部的状态。

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关键字在迭代中为变量创建一个 block 作用域,并在调用事件处理程序时具有正确的索引。

https://stackoverflow.com/questions/17981437/

相关文章:

r - 为什么 na.omit 向空数据框添加一行?

google-drive-api - 我如何将文件上传到我拥有具有编辑权限的共享链接的 Google

db2 - SQLRPGLE 中 OPEN 游标上的 SQL -302

magento - 如何在 Magento 的 cms 页面上放置 php 语法

find - 如何为大量文件添加标题(空/非空)

itextsharp - 使用 iTextSharp.ShowTextAligned() 添加水印

qt - 平均共享 QML 行中的水平空间

perl - Mojolicious 应用程序中的并行请求

haskell - Tree(Int,Int) 在 haskell 中是什么意思?

axapta - 根据用户输入启用/禁用向导的 FINISH 按钮