3

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

让我们想象一下我们有这样的结构：

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

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

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

4

2 回答 2

5

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

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

于 2013-06-22T21:08:40.100 回答
5

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

于 2013-06-22T21:42:37.610 回答