是否可以在 for 循环中添加一个 eventListener，如果可以，您将如何实现它？

Question

对我来说，For 循环和 ForEach 循环是处理和显示大数据的两种最佳方式。问题是我想将一个 eventListener 添加到循环中，然后你立即运行进入问题。这是我的代码，它循环遍历 API 提供的数组并完美地创建 HTML Div。在代码底部附近，您可以看到我试图添加一个 EventListener 并记录发生的任何点击。当我点击时，我在控制台中收到了这个：

[object HTMLDivElement] Has Been Clicked

这意味着它不会从点击的 div 中提取信息。

for (i = 0; i < filtered.length-1; i++) {
   //Loop through games of Leagues

   for (x=0; x<filtered[i].length;x++){
    //Create Parent Div For Data
let parent = document.createElement("div")
parent.className = 'parentDiv'

//League Duplication not allowed
if (arrLeagues.includes(filtered[i][x].league.id)) {

} else {
arrLeagues.push(filtered[i][x].league.id)

//League Name
let league = document.createElement("div")
league.className = 'league'
league.innerHTML = filtered[i][x].league.name + `<img class='flag' src=${filtered[i][x].league.flag}>`
parent.appendChild(league)
}

//Home Container
let child1 = document.createElement("div")
child1.className = 'childDiv'

//Game Status
let gameStatus = document.createElement("div")
gameStatus.className = 'status'
gameStatus.innerHTML = filtered[i][x].fixture.status.short
parent.appendChild(gameStatus)

//Home Name
let homeTeamName = document.createElement("div")
homeTeamName.className = 'team1'
homeTeamName.innerHTML = filtered[i][x].teams.home.name
parent.appendChild(homeTeamName)

//Home Score
let homeTeamScore = document.createElement("div")
homeTeamScore.className = 'score1'


parent.appendChild(homeTeamScore)

//Away Container
let child2 = document.createElement("div")
child2.className = 'childDiv'

//Away Name
let awayTeamName = document.createElement("div")
awayTeamName.className = 'team2'
awayTeamName.innerHTML = filtered[i][x].teams.away.name
parent.appendChild(awayTeamName)

//Away Score
let awayTeamScore = document.createElement("div")
awayTeamScore.className = 'score2'

parent.appendChild(awayTeamScore)

//My Attempt to add Event Listener

parent.addEventListener("click", function(){
    console.log(`${awayTeamName} Has Been Clicked`)
})

//Push all Data to DOM
document.querySelector('.parentContainer').appendChild(parent);

我已经尝试寻找其他页面或相关信息，但似乎并不多。如果你能 link 我了解这方面的信息或解释如何将 eventListeners 添加到循环创建的元素，那就太好了。当然，我什至不知道这是否可能或实用，如果不可能或不切实际，请不要害怕告诉我。

Answer 1

这是可能的，但您必须小心范围。 let 和 const 主要解决 for 循环的这些问题。

在您的情况下，您似乎要输出 div 的内容，而不是对象本身，您可以使用 awayTeamName.innerHTML (HTML) 或 awayTeamName.innerText（文字内容）.

是否可以在 for 循环中添加一个 eventListener，如果可以，您将如何实现它？

Is it possible to add an eventListener in a for loop, if so, how would you implement it?

javascript

api

ajax

jquery

json