addEventListener傳遞調用者作爲參數

Question

我有以下代碼。而我的問題是，點擊時，事件正在觸發，但通過的參數不是正確的。它傳遞最後一個動態創建的行，即dataStructure.length值。任何人都知道如何解決這個問題的解決方案？

 var table = document.getElementById('output');     

     for(i =0; i<dataStructure.length; i++){ 
      var row = document.createElement('tr'); 
      row.setAttribute('id', i); 
      var url = dataStructure[i].url; 

      if(document.addEventListener) 
       row.addEventListener('click', function(){handleRowClick(i);}, false); 
      var obj = dataStructure[i]; 
      var cellCount = 0; 
      for(field in obj){ 
       var cell = document.createElement('td'); 
       cell.setAttribute('id', cellCount++); 
       //cell.addEventListener('click', function(){window.open(dataStructureObj.links[i].url);}, false); 
       cell.innerHTML = obj[field]; 
       row.appendChild(cell); 
      } 
      cellCount = 0; 
      table.appendChild(row); 
     }   
     } 

     function handleRowClick(rowClicked){ 
      var rowHTML = rowClicked.innerHTML; 
      var cells = rowHTML.getElementsByTagName('td'); 
      for(cell in cells) 
      { 
       alert(cell.value); 
      } 
      window.open(cells[1].innerHTML); 
     } 

Answer 1

在function(){handleRowClick(i);}i是循環變量i。當函數被調用時，循環被完成並且i保存它在循環結束時所做的最後一個值，而不是當你創建function(){}時它保存的值。

這是閉環問題。使用或者關閉或Function#bind解決方案見this question：

row.addEventListener('click', handleRowClick.bind(window, i), false); 

但是，你沒有真正使用i的時刻。這將是更容易說：

row.addEventListener('click', handleRowClick, false); 

，然後用this檢索該行：

function handleRowClick(){ 
    window.open(this.cells[1].innerHTML); 
} 

（附註：遺憾的是，如果你爲了支持IE < = 8添加attachEvent備份，它沒有得到正確的this，所以你仍然可以/綁定看着封得到你想要的對象）

也：

for(i =0; i<dataStructure.length; i++){ 

失蹤var：i是一個意外的全球性。

 row.setAttribute('id', i); 

避免getAttribute/setAttribute在HTML文檔。他們不會在IE中做他們應該做的事情。使用DOM Level 2 HTML屬性代替它們，它們更可靠，更易讀：row.id= i。