javascript - 在 Javascript 中动态添加事件处理程序

Question

我在使用 Javascript 时遇到了一个奇怪的问题。我得到的是一个特定格式的字符串，我将尝试从中创建一个表。

表格每行只有一个单元格，字符串格式为:
每个单元格(行)需要显示的内容
@
将传递给 onmouseover 事件处理程序的参数，当用户将鼠标移到显示的文本上时会调用该事件处理程序。

JS代码:

// the string of format
var stringProof = document.getElementById("stringProof").value;
var arrayOfProof = stringProof.split("#");

// find the table
var table = document.getElementById("proofTable");
// remove what's within
table.innerHTML = "";

for(var i = currentIndex*4;i < end;i++)
{
    // iterative create the text, span, cell and row
    var currentStepProof = arrayOfProof[i];
    var elementsInCurrentStepProof = currentStepProof.split("@");

    var tr = document.createElement("tr");
    var td = document.createElement("td");

    var span = document.createElement("span");
    span.onmouseover = function() {alert(elementsInCurrentStepProof[1]);};
    var text = document.createTextNode(elementsInCurrentStepProof[0]);
    span.appendChild(text);
    td.appendChild(span);
    tr.appendChild(td);
    table.appendChild(tr);
}

问题是onmouseover函数在哪一行被触发并不重要，它只会提示最后一行的参数，也就是最后一行的onmouseover的参数函数覆盖传递给前一行的 onmouseover 函数的内容。

有什么想法吗？非常感谢!!~~

Answer 1

您的所有处理函数共享完全相同的“elementsInCurrentStepProof”变量。因为它随着 for 循环的每次迭代而改变，所以所有处理程序都会“看到”它的最终状态(最后一次迭代的状态)。

您可以像这样为每个处理程序提供自己的值副本:

span.onmouseover = function(element) {
  return function() { alert(element); }
}(elementsInCurrentStepProof[1]);

通过使用中间函数，您可以为值的副本创建一个新的存储范围(闭包)。请注意，复制“elementsInCurrentStepProof”是不够的，因为该变量的值是对数组的引用。您需要传递元素 1 的值。