使用 addEventListener 在 JavaScript 中设置单独的函数参数以具有唯一的 ID

Setting separate function parameters in JavaScript with addEventListener to have unique ids

本文关键字：参数 ID 唯一 函数 使用 JavaScript 设置 单独 addEventListener      更新时间：2023-09-26

我有一个将元素生成到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
}

所以我需要mouse事件对象。

此当前代码确实创建了元素，但每次单击都会调用具有相同 id 作为参数的函数（10 作为 id 发送，mouse 事件工作正常）。

任何想法都值得赞赏！

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

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

要解决此问题，请先声明一个新函数：

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

然后将该行更改为：

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

有关此技术的详细信息，请查看此问题。

相关文章：