web-dev-qa-db-ja.com

オブジェクトの配列にイベントリスナーを追加する方法

オブジェクトの配列（具体的には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}
javascriptextjsevent-listenereaseljs
18
Ryan Williams

承知しました。クロージャを使用して、その繰り返しのインデックスを保存できます。それ以外の場合は、同じ関数スコープで共有され、同じ反復の値が提供されます。それぞれに個別の関数を作成すると、関数内の状態が保存されます。

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キーワードを使用すると、反復で変数のブロックスコープが作成され、イベントハンドラーが呼び出されたときに正しいインデックスが設定されます。

18
Sushanth --

このような何かが動作するはずです：

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

動作する理由は、アラートメッセージに表示されるindexの値を保持するクロージャーを作成するためです。ループを通過するたびに、indexの別の値を保持する別のクロージャーが作成されます。

8
Lee Meador

もちろん、クロージャーが解決策ですが、Extをロードしているので、それを使用して非常に読みやすいコードを取得することもできます。インデックスは、Ext.Array.eachの2番目の引数として渡されます（Ext.eachにエイリアスされます）。

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

これは私が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);
};

幸運を！

0
Alexander Rulezovsky