JQuery点击事件优化

<div id="content"></div>

var html = '';
for (var i=0; i<10000; i++) {
    html += '<p>'+i+'</p>';
}
$('#content').append(html);

第一种事件绑定方式

$('#content p').off('click').on('click', function() {
   $('#content').append('<p>啦啦啦啦</p>');
});

第二种事件绑定方式：事件委托

$('#content').off('click').on('click', 'p', function() {
  $('#content').append('<p>啦啦啦啦</p>');
})

第三种事件绑定方式：事件委托

$('#content').off('click').on('click', function(e) {
  if (e.target.tagName == 'P') {
    $('#content').append('<p>啦啦啦啦</p>');
  }
});

区别：
1、第一种方式通过点击事件添加的p标签没有被绑定点击事件，后2种有
2、通过谷歌浏览器测试显示，浏览器内存消耗不同，第一种明显偏多（通过测试，基本上元素达到300以上才会有差异）

结论：
推荐使用事件委托的方式进行事件绑定

转载于:https://www.cnblogs.com/Zting00/p/7497619.html

来源：CSDN

作者：baifu2766

链接：https://blog.csdn.net/baifu2766/article/details/101675115