在Javascript中动态添加事件处理程序 [英] Dynamically adding event handler in Javascript

问题描述

我遇到了一个奇怪的Javascript问题。我得到的是一串特定的格式，我将尝试创建一个表格。

表格每行只有一个单元格，字符串格式为：

每个单元格（行）需要显示的内容

@

参数将传递给 onmouseover 事件处理程序，当用户将鼠标移动到显示位置时被调用文本。

JS代码：

  //字符串格式
 var stringProof = document.getElementById（stringProof）.value; 
 var arrayOfProof = stringProof.split（＃）; 
 
 //找到表
 var table = document.getElementById（proofTable）; 
 //删除
中的内容table.innerHTML =; 
 
 for（var i = currentIndex * 4; i< end; i ++）
 {
 //迭代创建文本，跨度，单元格和行
 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）; 
 
 $ / code> 

问题在于 onmouseover 函数被触发，它只会提醒最后一行的参数，这意味着最后一行 onmouseover 函数的参数会覆盖传递给前一行的 onmouseover 函数。

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

解决方案

您的所有处理函数共享完全相同的elementsInCurrentStepProof变量。因为它随循环的每次循环而改变，所有处理程序都会在它的最后状态（最后一次迭代）中看到它。

您可以为每个处理程序提供自己的值副本，如下所示：

  span.onmouseover = function（element）{
 return function（）{alert（element）; } 
}（elementsInCurrentStepProof [1]）; 
  

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

I've encountered a weird problem with Javascript. What I was given is a string of certain format that I will try to create a table out of.

The table will only have a cell per row and the format of the string is:
Content needs to be displayed for each cell (row)
@
parameter that will be passed to the onmouseover event handler which gets called when the user moves their mouse over the displayed text.

The JS code:

// 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);
}

The problem is it does not matter which rows the onmouseover function is triggered, it will only alert the parameter of the last row which means the parameter of last row's onmouseover function overwrites what was passed to the previous row's onmouseover functions.

Any thoughts? Thanks a lot!!~~

解决方案

All your handler functions share exactly the same "elementsInCurrentStepProof" variable. Because it changes with every iteration of that for loop, all the handlers will "see" it in its final state (that of the last iteration).

You can give each handler its own copy of the value like this:

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

By using an intermediary function, you create a new storage scope (a closure) for a copy of the value. Note that it's not enough to make a copy of "elementsInCurrentStepProof", because the value of that variable is a reference to an array. You need to pass the value of element 1.

这篇关于在Javascript中动态添加事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！