将eventlistener添加到元素的最佳方法

Question

我正在努力寻找悬挂事件的最有效方式.

让我们想象我们有这样的结构:

<ul>
    <li> 1st li </li>
    ...
    <li> 99999th li </li>
<ul>

所以,我们有大约10000个li元素,我们想要为所有这些元素添加事件监听器,假设我们也可以使用jQuery.

首先想到的

<li onclick="console.log(this)" >...</li>

这个解决方案的一个不好的部分 - 我们增加了html标记的大小,因为总是重复onlick

第二个念头

$('ul li').on('click', function(){ 
    console.log(this)
})

当然这个解决方案不是一个选项,因为我们添加了10000个事件监听器,显然不利于性能.

第三个想法,事件授权

$('ul').on('click', 'li', function(){
    console.log(this)
})

看起来非常好,对我来说,我们只使用一个事件监听器,而不是删除html标记,它可以正常工作.

所以,我问这个问题,因为有时我会查看不同网站的来源,其中很大一部分使用第一种方式.为什么？第一种方式有一些优势？

我想这可能是因为抓住动态添加的元素到页面更容易,但可能有些东西我不知道？

Answer 1

我不会把"大网站"看作最好的网站开发实践.第一种方式与其他两种方式相比没有任何优势,因为它将JavaScript与HTML混合在一起并且难以维护.

事件委托将比其他两个更轻,并且具有能够处理动态生成的元素的优点,因此在这种情况下,它可能是最佳选择.在选择之前,我会用两种方法分析您的应用程序.

Answer 2

你可以在这里找到你的答案 - jQuery.click()vs onClick,
正如你可以看到 http://jsperf.com/testper测试,事件委托方法是事件挂起的最佳方法.在你的情况下,你有10000或更多事件比肯定第3种方法最适合你.