Question

好的，所以我正在构建一个应用程序（对于Chrome（*不是扩展名））并在页面上有一堆重复的元素。所以我决定使用循环动态构建这些元素，如下所示：

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

我的问题在尝试将我的函数附加到onclick事件时发生。当我看到元素时，它上面没有onclick属性......即使我单步执行，我也可以到达该行：

elem.onclick = "doSomething()"

然后我又一次又没有......到目前为止，我已经尝试过使用和不使用引号以及.onclick和.onClick ......

提前谢谢！

Answer 1

您应该始终传递函数本身，而不是任何类型的字符串。

elem.onclick = doSomething;

这会将doSomething设置为点击处理程序。

使用字符串会在内部调用eval，这很慢且可能不安全（后者不适用于此处）。
直接传递函数更直接。
只有在通过HTML设置onclick时才需要字符串。

Answer 2

“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是昂贵的。已更新示例，而是创建一个文档片段，该片段已填充并随后附加到父元素。这使得在第一个示例中缓存了对父项的引用。

Chrome“onclick”事件问题

2 个答案: