如何通過JavaScript中的eventListener傳遞int？

Question

我從Json文件生成一張魔術牌列表。

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傳遞給事件處理程序，以便我可以獲取我的卡對象？

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

在你的for循環做：

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的值傳遞給click處理程序的實例。