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

我正试图找到最有效的方式来解决这个问题

让我们假设我们有这样的结构：

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

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

第三个想法，活动代表团

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

看起来真的很不错，我们只使用了一个事件监听器，没有废弃的html标记，它可以根据需要工作

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

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

我不会在“大型网站”上寻找最佳的web开发实践。第一种方法实际上没有其他两种方法的优势，因为它混合了JavaScript和HTML，并且更难维护

---

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

您可以在这里找到答案-，

---

正如您在测试中所看到的，事件委派方法是事件挂起的最佳方法。在您有10000个或更多事件的情况下，第三种方法最适合您。

那么

上的一个事件侦听器呢？我认为最好的方法可能是用作.on语句的基本标记-这样您只有一个观察者，不是每个ul都有一堆。你觉得怎么样？当然，如果你在页面上只有一个
：）那么在同一页面上有很多不同的ul，用于不同的目的，你必须在每个ul中添加自己的侦听器吗？+1除非你应该意识到委派的陷阱。。。如果文档中的元素拦截“冒泡事件”&返回false或调用event.stopPropagation（）；它永远不会到达您的委托事件处理程序。只要你记住这一点，当事件没有触发时，这应该很容易发现。我同意第三种方法是最好的。但你们的测试很差，因为它只测试事件绑定，而不测试触发。@claustrofob我试图针对这个问题，下次我会注意的，谢谢。

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

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