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种方法最适合您。