使用FOR循环javascript调用事件侦听器

我对javascript中的以下for循环有一个问题-for循环的目的很简单，它们用于侦听我所拥有的所有列的事件

我有两种方法来实现这一点，我想知道为什么一种有效而另一种无效

第一种方法不起作用：

var column = document.querySelectorAll("td");

for (var i =0 ; i< column.length; i++)//column.length is 9
{
column[i].addEventListener("click",function(){
column[i].innerText = "X";
})
}

var column=document.querySelectorAll（“td”）；
对于（var i=0；i

触发事件时，它会打印出以下错误：

未捕获的TypeError:无法设置未定义的属性“innerText” 在HTMLTableCellElement。（：6:21）

我将“column[I].innerText=“X”替换为console.log（I），得到9。 但根据for循环条件，当我的column.length为9时，它应该在我达到8时结束，我使用i 问题：为什么我可以在这个for循环中得到9？为什么我下面的第二种方法可以工作

第二种方法确实有效：

var column = document.querySelectorAll("td");

for ( var i = 0 ; i < column.length; i++ )
{
    column[i] = clickAction(i);
}

function clickAction(param)
{
    column[param].addEventListener("click",function(){  
    column[param].innerText = "X";  
})
}

var column=document.querySelectorAll（“td”）；
对于（变量i=0；i

如果我在外部将动作放入函数中，效果会很好

---

感谢在第一种方法中，当循环存在时，时间值i为9，它在所有列上以值9注册事件。因此，当您触发事件时，它会抛出一个错误。

我发现，为了避免此问题，除了从外部调用函数外，我还可以执行以下操作：

var column = document.querySelectorAll("td");

for (var i =0 ; i< column.length; i++)//column.length is 9
{
column[i].addEventListener("click",function(){
this.innerText = "X"; //using this keyword here so that current object is being called.
})
}

var column=document.querySelectorAll（“td”）；
对于（var i=0；i

请查看并感谢您的回复。阅读您发布的链接后：我发现下面的链接帮助我轻松理解此问题。