如何將事件偵聽器添加到對象數組

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值。

Answer 3

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

Answer 4

當然，閉包是解決方案，但既然他已經加載了 Ext，他不妨使用它並獲得一些非常可讀的代碼。 索引作為第二個參數傳遞給Ext.Array.each （別名為Ext.each ）。

Ext.each(imageArray, function(gShape, index) {
    gShape.addEventListener("click", function() {
        alert("You clicked region number " + index);
    });
});

Answer 5

這是我用於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);
};

祝你好運！