オブジェクトの配列(具体的には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
キーワードを使用すると、反復で変数のブロックスコープが作成され、イベントハンドラーが呼び出されたときに正しいインデックスが設定されます。
このような何かが動作するはずです:
for (var i = 0 ; i < imageArray.length ; ++i) {
function(index) {
imageArray[index].addEventListener("click", function() {
alert ("You clicked region number: " + index");
});
} ( i);
}
動作する理由は、アラートメッセージに表示されるindex
の値を保持するクロージャーを作成するためです。ループを通過するたびに、index
の別の値を保持する別のクロージャーが作成されます。
もちろん、クロージャーが解決策ですが、Extをロードしているので、それを使用して非常に読みやすいコードを取得することもできます。インデックスは、Ext.Array.each
の2番目の引数として渡されます(Ext.each
にエイリアスされます)。
Ext.each(imageArray, function(gShape, index) {
gShape.addEventListener("click", function() {
alert("You clicked region number " + index);
});
});
これは私が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);
};
幸運を!