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

我对javascript中的循环有以下问题 - for循环的目的很简单，它们意味着要听所有列的事件。使用FOR循环调用事件侦听器javascript

我有两种方法来实现这一点，我想知道为什么一个工作，但不是另一个。

不起作用第一种方法：

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"; 
}) 
}

它打印出来，当事件触发以下错误：

遗漏的类型错误：无法在HTMLTableCellElement设置的不确定财产“的innerText”。（：6：21）

我用console.log（i）替换了“column [i] .innerText =”X“，我得到了9. 但是根据我的for循环条件，它应该在我达到8作为我的column.length是9，我使用我column.length，所以它应该停在8。

问题：为什么我可以得到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"; 
}) 
}

它的工作原理很好，如果我把这个动作放到一个函数外部。

感谢

来源

2017-04-08 csamleong

请参阅https://stackoverflow.com/questions/1451009/javascript-infamous -loop-issue和https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example –

感谢您的回复。阅读您发布的链接后：我发现以下链接可以帮助我轻松理解此问题。 http://conceptf1.blogspot.my/2013/11/javascript-closures.html – csamleong

在第一种方法，当你的循环中存在那个时候i的值9，它所以，当你火它抛出一个错误事件寄存器与价值9.所有列的事件。

来源

2017-04-08 03:25:33

我发现，为了避免这个问题，除了外部调用函数，我也可以做到以下几点：

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. 
}) 
}

来源

2017-04-08 03:52:28 csamleong

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

回答

相关问题