在Javascript中動態添加事件處理程序

我遇到了Javascript的奇怪問題。我得到的是一串特定的格式，我將嘗試創建一個表格。在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函數。

有什麼想法？非常感謝!! ~~

來源

2013-05-29 user1935724

http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example – georg

所有的處理函數都共享完全相同的「elementsInCurrentStepProof」變量。因爲它隨着該循環的每次迭代而改變，所以所有處理程序都將「看到」它的最終狀態（最後一次迭代的狀態）。

你可以給每個處理它自己的價值的副本是這樣的：

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

利用中介功能，爲您創造的價值的一個副本的新存儲示波器（封閉）。請注意，製作「elementsInCurrentStepProof」的副本是不夠的，因爲該變量的值是對數組的引用。您需要將元素的值1

來源

2013-05-29 23:44:54 Pointy

我試過你的代碼，現在我得到[object MouseEvent] onmouseover函數被調用（每個人） – user1935724

@ user1935724呃......你是否確定*你完全按照我的回答複製了這段代碼？返回的函數不應該有一個參數。 – Pointy

@BrunoLM感謝編輯！ – Pointy

這將這樣的伎倆：

http://jsfiddle.net/BhLfk/

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

請注意，您的問題是缺少一些信息，這使得它有點難以明白你正在努力去做。

來源

2013-05-30 00:05:30 bigbearzhu

@ user1935724爲了回答你提出的[object MouseEvent]的問題，我想你可能會錯過Pointy答案中行尾的部分「（elementsInCurrentStepProof [1]）」，這會迫使函數使用特定的參數默認的鼠標事件。查看我的答案以獲得更易於理解的解決方案。它基本上和Pointy的答案一樣。 – bigbearzhu

在Javascript中動態添加事件處理程序

回答

相關問題