addEventListener将调用者作为参数传递 [英] addEventListener pass caller as argument

问题描述

我有以下代码。我的问题是，当点击时，事件正在触发，但传递的参数不正确。它传递最后一个动态创建的行，即dataStructure.length值。任何人都知道如何解决这个问题？

I have the following code. And my problem is that when clicking, the event is firing but the argument passed is not the correct one. It is passing the last dynamically created row i.e. dataStructure.length value. Anyone knows a solution how to get around this?

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

推荐答案

函数中的（）{handleRowClick（i）;} 是循环变量 i 。当函数被调用时，循环被完成并且 i 保存它在循环结束时所做的最后一个值，不该值它在您创建函数（）{} 时保持。

i in the function(){handleRowClick(i);} is the loop variable i. When the function gets called, the loop is long-finished and i holds the last value it did at the end of the loop, not the value it held when you created the function(){}.

这是闭包循环问题。参见这个问题对于使用闭包的解决方案或函数#bind ：

This is the closure loop problem. See this question for solutions using either closures or Function#bind:

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

然而，你并没有真正使用 i 此刻。它会更容易说：

However, you're not really using that i at the moment. It would be easier to say:

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

然后使用这个来检索行：

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

（附注：不幸的是，如果你添加 attachEvent 备份为了支持IE< = 8，它没有得到这个吧，所以你仍然会看着closures / bind来获取你想要的对象。）

(Side note: unfortunately if you add attachEvent backup in order to support IE<=8, it doesn't get this right, so you'd still be looking at closures/bind to get the object you want.)

还：

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

缺少 var ： i 是偶然的全球。

        row.setAttribute('id', i);

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

Avoid getAttribute/setAttribute in HTML documents. They don't do what they should in IE. Use the DOM Level 2 HTML properties instead, they're more reliable and more readable: row.id= i.

这篇关于addEventListener将调用者作为参数传递的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！