Chrome“onclick”事件问题

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 的成本很高。这些示例已更新为创建一个文档片段，该片段被填充然后附加到父元素。这使得在第一个示例中不需要缓存对父级的引用。