使用参数将 onlick 事件添加到多个元素

Question

我正在动态创建一个元素表并将它们存储在一个数组中。以下内容可能看起来像是一场绝对的噩梦，但这就是我决定对其进行排序的方式。我现在的问题是addEventListener我想添加一个onclick连接到的事件PlayMusic()。我尝试了一个简单的.onclick =并省略了function(){}但随后PlayMusic()立即执行。在function(){}那里，当我单击其中一个元素时，第一个参数 ( i) 是“最后使用的数字”（也就是 21 个元素中的 22 个）。我将如何确保这些onclicks 中的每一个在其参数中都有正确的索引？var thetable = document.getElementById("mustable");for(var i=0; i<fullists.length-1; i++){    fullists[i][2] = [];    fullists[i][3] = [];    for(var j=0; j<fullists[i][1].length; j++)    {        var row = thetable.insertRow();        fullists[i][2][j] = row.insertCell();        fullists[i][2][j].className = "musentry";        var header = fullists[i][0].substring(0,fullists[i][0].lastIndexOf("."));        if(fullists[i][1][j][1] != undefined)            var title = fullists[i][1][j][1];        else            var title = fullists[i][1][j][0].substring(fullists[i][1][j][0].lastIndexOf("/"));        fullists[i][2][j].innerHTML = header + "<br /><b>" + title + "</b>";        fullists[i][2][j].addEventListener("click",function() { PlayMusic(i,j); },false);        fullists[i][3][j] = 0;    }}

Answer 1

问题是，当函数执行时，i已经有了不同的值，因为循环已经继续执行。如果您将循环更改为 uselet i而不是var i(same for j) 它将起作用，因为let在for迭代器变量中具有特殊行为，它实际上会在每次迭代时创建范围为循环内部的变量的另一个副本，因此该副本获胜不改变。

另一种方式，基本上是相同的，但明确地完成：首先将它存储在另一个块范围的变量中。例如const i2 = i，然后i2在function () {}. 对j.

或者，写.addEventListener(..., PlayMusic.bind(null, i, j)). 你可以从bind一个函数创建一个新函数，其中 athis和 arguments 已经绑定到它。由于绑定立即发生，从而捕获了 and 的当前值i，j这也解决了它。