Динамическое добавление обработчика событий в 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.

Answer 2

Это будет делать трюк:

http://jsfiddle.net/BhLfk/

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

Пожалуйста, обратите внимание на ваш вопрос отсутствует некоторая информация, которые делают его немного сложнее понять, что вы пытаетесь сделать.