javascript - 循环上的 addEventListener 无法与 IIFE 一起使用

Question

在下面的代码中，j 的值始终设置为迭代的最后一个。我已经在使用 IIFE，但它仍然给出了非预期的行为。我是不是做错了什么？

function renderUsers(users) {
    const frag = document.createDocumentFragment();
    const userList = document.getElementById('user-list');

    // Create and append all the users on the user list
    for (var j = 0; j < users.length; j++) {
        var item = document.createElement('li');
        var division = document.createElement('div');
        var userName = document.createElement('span');
        var deleteButtonAnchor = document.createElement('a');
        var deleteButton = document.createElement('i');
        deleteButton.classList.add('material-icons');
        deleteButton.textContent = 'delete_forever';
        (function() {
            deleteButton.addEventListener('click',function() {
                console.log(j);
            });
        })();
        deleteButtonAnchor.appendChild(deleteButton);
        division.appendChild(userName);
        division.appendChild(deleteButtonAnchor);
        item.appendChild(division);


        userName.appendChild(document.createTextNode(users[j].name.first+' '+users[j].name.last));
        frag.appendChild(item);
    }
    userList.appendChild(frag);
}

Answer 1

您想要对闭包执行的操作是将迭代变量作为参数传递，如下所示:

 (function(j) {
     deleteButton.addEventListener('click',function() {
          console.log(j); // j is the parameter
     });
 })(j);

或者正如 @torazaburo 在评论中相当注意到的那样，您可以使用 let 关键字作为迭代变量来消除创建闭包的需要。有关 let 关键字的更多信息，您可以找到 here 。但请注意，这是 ES6 功能，在旧版浏览器中未实现，因此您可能需要先对其进行转译(例如使用 babel)。