2013-07-31 98 views
8

我有對象(具體easelJS圖像)的數組的數組 - 這樣的事情:如何添加事件偵聽器對象

我想要做的是有一個事件監聽器,而不是:

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

我希望程序知道具體是點擊的區域,這樣我可以通過以下方式發出一個警告框:

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

你想要什麼與你有什麼不同? – 2013-07-31 21:43:02

+0

它應該工作..你試過了嗎? – putvande

+0

@Jeffman它看起來像一個循環,其中索引 – Ian

回答

7

像這樣的東西應該工作:

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

它的工作原理的原因是因爲它會創建一個認爲將警報消息中顯示可以在的index值封閉。每次通過循環創建另一個閉包,保存另一個值index

+0

任何人都知道我爲什麼downvoted?就是想。 –

+1

有人可能沒有檢查時間戳,並認爲你複製了上面的答案。 –

8

當然。您可以使用閉包來保存該迭代的索引。否則,由相同的函數範圍共享,並會給你相同迭代的值。爲每個函數創建一個單獨的函數將保存函數內部的狀態。

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

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

或更好

for(var i=0; i< immageArray.length; i++) { 
     imageArray[i].addEventListener("click", bindClick(i)); 
} 

function bindClick(i) { 
    return function(){ 
      console.log("you clicked region number " + i); 
      }; 
} 
+1

歡迎您做任何事,但我會刪除第一個例子。這不僅僅是其他答案的內容,我認爲它不應該被用於當你可以使用更清潔更有效率的東西時,比如你的第二個例子 – Ian

+4

@Ian ..我同意你的觀點..但是可能有些情況當用戶可能不明白它的實際工作方式時,除非有詳細的例子。這就是我忽略第一個例子的原因,這樣他們就可以比較第一個例子如何以更清晰的方式寫入 –

+0

Thanks @ Sushanth- - 我最終結束了這些「拉姆達升降」的情況,通常可以找到更好的方式,但最好是兩個並排。 – phatskat

1

當然,封閉是解決方案,但因爲他有內線加載他還不如用它,並得到了一些非常可讀的代碼。索引作爲第二個參數傳遞給Ext.Array.each(別名爲Ext.each)。

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

這是我使用的是什麼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); 
}; 

祝您好運!

相關問題