javascript - 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 保留它在循环结束时所做的最后一个值，不是它在创建函数(){}。

这就是闭环问题。参见 this question对于使用闭包或 Function#bind 的解决方案:

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

但是，您现在并没有真正使用那个i。更容易说:

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

然后使用this 检索行:

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

(旁注:不幸的是，如果您添加 attachEvent 备份以支持 IE<=8，它不会得到 this 正确的，所以您仍然是查看闭包/绑定(bind)以获得您想要的对象。)

还有:

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

缺少 var:i 是一个偶然的全局变量。

        row.setAttribute('id', i);

避免在 HTML 文档中使用 getAttribute/setAttribute。他们没有做他们应该在 IE 中做的事情。请改用 DOM Level 2 HTML 属性，它们更可靠且更具可读性:row.id= i。