javascript - 使用 addEventListener 在 javascript 中设置单独的函数参数以具有唯一的 id

Question

我有一个将元素生成到 div 中的 for 循环，并且我希望每个元素调用相同的函数但具有唯一的 id。

for(var i = 0; i < 10; i++)
{
    var p = document.createElement("p");

    var t = document.createTextNode("asdf");
    p.appendChild(t);

    p.addEventListener("click", function(e){popup(e, i);}, false);

    document.getElementById("someDiv").appendChild(p);
}

比方说，功能是：

function popup(e, id)
{
    //do stuff with the mouse event and get data according to the id
}

所以我需要鼠标事件对象。

当前的代码确实生成了元素，但是每次单击都会调用具有与参数相同的 id 的函数（10 作为 id 被发送，鼠标事件工作正常）。

任何想法表示赞赏！提前致谢。

Answer 1

发生这种情况是因为创建了一个闭包，该闭包保留了ifor 循环中的最后一个值，您需要更改此行：

p.addEventListener("click", function(e){popup(e, i);}, false);

要解决这个问题，首先声明一个新函数：

function createfunc(i) {
    return function(e) {popup(e, i); }
}

然后将该行更改为：

p.addEventListener("click", createfunc(i), false);

检查此问题以获取有关此技术的更多信息。