javascript - 向元素添加事件监听器的最佳方式

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 个事件监听器，显然不利于性能。

第三个想法，事件委托(delegate)

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

对我来说看起来非常好，我们只使用一个事件监听器，而不是垃圾 html 标记，它可以按我们的需要工作。

所以，我问这个问题，因为有时我会查看不同站点的源代码，其中大部分都使用第一种方式。为什么？第一种方式有一些优势吗？

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

Answer 1

我不会去“大网站”寻找最佳网络开发实践。第一种方式与其他两种方式相比确实没有优势，因为它混合了 JavaScript 和 HTML，并且更难维护。

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