添加点击监听器以在循环中列出项目

Question

我有以下代码：

    // Iterate through each of the children
    for(j = 0; j < len; j++) {
        var entry = sortedArray[j];

        // Each entryLI is a child of nameOL <ol> element
        var entryLI = document.createElement("li"); 

        // Each entryLI should have a unique click listener
        entryLI.addEventListener("click", function(event) {entry.onListItemClick()});

        // Set the text of the <li> to the name of the entry
        var nameNode = document.createTextNode(entry.entryName);
        entryLI.appendChild(nameNode);

        // Append the entry list item to the ordered list
        nameOL.appendChild(entryLI); 
    }

我正在尝试在此循环中为每个列表项提供一个处理点击事件的事件侦听器。但是，出于某种原因，单击任何列表项都会调用列表中 last 项的事件侦听器。

谁能给我解释一下这是为什么？

我从完全不同的语言来到 JavaScript，并且我正在努力使用基于原型的类。

Answer 1

entry 变量在每个循环中都会被覆盖。避免这种情况的一种方法是：

for(j = 0; j < len; j++) {

    (function(entry){

       ....

    })(sortedArray[j])

}

此 IIF（立即调用函数）为每次迭代分别确定入口变量的范围。

Answer 2

是因为下面这行

entryLI.addEventListener("click", function(event) {entry.onListItemClick()});

绑定到变量 entry 而不是它的值。因此，在整个循环中分配或更改值的内容，最后一次迭代的值 保存在入口变量中，每个事件处理函数将访问该变量获取最后一个值。

解决方法：使用immediate function as Kenney suggested in this Q thread or check this answer 比较不明确。

添加点击监听器以在循环中列出项目

Adding click listeners to list items in loop

javascript

html

javascript-events