javascript - 带有附加 div 的性能点击事件

Question

我有一个 div，我使用 jQueryappend或html.

我搜索了有关使用 jQuery 附加元素的信息。

哪个更好？

使用这样的字符串追加：

$('#div_main').append('<div id="div_sub" onclick="func(param);"></div>') 

或者：

$('#div_main').append($('<div id="div_sub"></div>').click(function(){ func(param) }))

我尝试了第一个速度更快但性能更好的第一个？

注意appendin 循环。

Answer 1

两者都不。您不应该为动态添加/删除的元素重新绑定事件。相反，您应该将事件委托给他们最近的稳定父级：

$('#div_main').on('click', '.sub', function () {
   ...do stuff...
});

$(...).on('click', function () {
    $('#div_main').append('<div class="sub"></div>');
});

Answer 2

jsperf.com 是测试此类事情的好方法。使用 DOM 明显优于任何一个 jQuery 代码示例（它们的性能大致相同）。看看：http: //jsperf.com/clickers

var main = document.getElementById('div_main'),
    clicker = document.createElement('div');

clicker.onclick = function() { func(param) };
main.appendChild(clicker);