使用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

回答

相關問題