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的值。

Answer 2

这样可以解决问题：

http://jsfiddle.net/BhLfk/

var span = document.createElement("span");
span.data = elementsInCurrentStepProof[1];
span.onmouseover = function(event) {alert(event.target.data);};

请注意，您的问题缺少一些信息，这些信息使您更难理解您的目标。

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

2 个答案: