Chrome「onclick」事件問題

好吧，我正在構建一個應用程序（對於Chrome（*不是擴展名）），並在頁面上有一堆重複的元素。所以我決定用動態的循環，像這樣來構建這些元素：當它嘗試我的功能附加到onclick事件發生Chrome「onclick」事件問題

for(var i = 1; i <= 64; i++){ 
    var elem = document.createElement('div'); 
    elem.id = "element"+i; 
    elem.onclick = "doSomething()" 
    $("parentElement").appendChild(elem); 
}

我的問題。當我看元素有上沒有onclick屬性......甚至當我逐句通過我可以站上罰球線：

elem.onclick = "doSomething()"

於是我又一步而已......到目前爲止，我已經試過用並沒有引號和.onclick和.onClick ...

謝謝你提前！

來源

2011-08-30 jpalladino84

您應該隨時傳遞函數本身，而不是任何類型的字符串。

elem.onclick = doSomething;

這將設置doSomething作爲點擊處理程序。

使用字符串將在內部調用eval，這很慢並且可能不安全（後者在此不適用）。
直接傳遞函數更直接。
僅當您通過HTML設置onclick時，字符串纔是必需的。

來源

2011-08-30 19:31:38 pimvdb

謝謝！現在如果我想將一個參數傳入doSomthing（）會怎麼樣？我應該只使用一個惱人的功能？如elem.onclick = function（）{doSomething（obj.id）} – jpalladino84

@ ThisGuy84：是的，這是要走的路。 – pimvdb

仍然有問題...當我appendChild它刪除onclick事件！ – jpalladino84

「addEventListener」是一個更好的方法（如果你想解除綁定/綁定更多事件）。另外，我建議緩存父元素的引用，像這樣

var docFrag = document.createDocumentFragment(), 
    elem; 
for(var i = 1; i <= 64; i++){ 
    elem = document.createElement('div'); 
    elem.id = "element"+i; 
    elem.addEventListener('click', doSomething); 
    docFrag.appendChild(elem); 
} 
$("parentElement").appendChild(docFrag);

根據列表的大小，你可以考慮事件委派：

var docFrag = document.createDocumentFragment(), 
    elem, 
    parent = $("parentElement"); 
for(var i = 1; i <= 64; i++){ 
    elem = document.createElement('div'); 
    elem.id = "element"+i; 
    elem.className = "clickMe"; 
    docFrag.appendChild(elem); 
} 
parent.appendChild(docFrag); 
parent.addEventListener('click', function(event) { 
    if(event.target.class === 'clickMe') { 
     doSomething(event); 
    } 
});

（類名「clickMe 「完全是任意的）

編輯：這兩個例子都屬於OP在循環中附加到DOM的陷阱。這應該儘可能避免，因爲觸摸DOM代價很高。這些示例已更新爲創建一個已填充文檔片段，然後附加到父元素。這樣可以緩存對第一個示例中不必要的父對象的引用。

來源

2011-08-30 20:03:06 Mike

我正在研究這條路線！我很猶豫，因爲我不確定我是否能夠通過這個元素。不過看起來你只是回答了這個恐懼。 – jpalladino84

Chrome「onclick」事件問題

回答

相關問題