将事件监听器添加到元素的最佳方法答案

【问题标题】：The best way to add eventlistener to an element将事件监听器添加到元素的最佳方法
【发布时间】：2013-06-22 21:03:40
【问题描述】：

我正在努力寻找最有效的方式来挂起活动。

假设我们有这样的结构：

<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 标记，它可以按我们的需要工作。

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

+1 除非您应该注意委托的陷阱...如果文档中的元素拦截“冒泡事件”并返回 false 或调用 event.stopPropagation();它永远不会到达您的委托事件处理程序。只要您记住这一点，就应该很容易发现事件没有触发。

【解决方案2】：

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

【讨论】：