JavascriptでeventListener経由でintを渡す方法は？

Question

私はJsonファイルからMagicカードのリストを生成します。

for (i in set.cards) { 
     leftCardElement = document.createElement("p"); 
     leftCardElement.innerHTML = set.cards[i].points + " " + set.cards[i].name + "&nbsp"; 
     leftCardElement.addEventListener("click", leftCardClicked); 
} 

function leftCardClicked(event) {// access card.cost and other things } 

問題はleftCardElementClicked()メソッドが呼び出されたとき、私はset.cards[i]オブジェクトへのアクセス権を持ってできるようにしたいと思いますということです。 thisオブジェクトは、leftCardElementClicked()の中でクリックした要素を参照しているようです。私はカードオブジェクトを得ることができるように、私はインデックスiをイベントハンドラに渡すことができるいくつかの方法はありますか？あなたのforループで

Answer 1

同じように@AlejandroCが、（それぞれの反復に変更されます。このi）iへの依存なしには、 したがって、私はObject.assign()

を使用して、渡す前にそれを複製し、あなたのforループを実行します。

leftCardElement.addEventListener("click", leftCardClicked.bind(this, Object.assign({},set.cards[i])); 

その後、あなたの関数は次のようになります。

function leftCardClicked(card, event) { ... } 

Answer 2

は行います

leftCardElement.addEventListener("click", leftCardClicked.bind(this, set.cards[i]); 

その後、あなたの関数は次のようになります。

function leftCardClicked(card, event) { ... } 

Answer 3

代わりにあなたのイベントハンドラとして直接leftCardClickedを取り付けるのではなく、無名関数を使用します。

leftCardElement.addEventListener("click", function(evt) { 
    leftCardClicked(evt,i); 
}); 

を

ここで、iはループのインデックスです。これにより、その値をクリックハンドラのそのインスタンスに渡すクロージャが作成されます。で