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”事件问题

回答

相关问题