始终使用live()而不是bind()对唯一的dom元素有哪些缺点？

Question

当编写jQuery绑定事件时，我通常使用bind()的别名（click()，submit()等）。但是，随着我使用动态生成的内容越来越多，我发现不确定何时bind()无法工作，并且最终需要调试半个小时才尝试live()并使其工作。在ID选择器的参数范围内（例如'#foo'而不是.classes或元素('input')）：除了缺少方便的别名外，是否总是使用live()而不是bind()这些类型的绑定还有什么缺点，因为只能将一个DOM元素绑定到特定的ID？

编辑：我不是在问bind()和live()之间的区别；已经涵盖了这一点。我问的是默认情况下仅使用live()的缺点，因为诱惑是在您不能错误地过度选择时这样做（即，当您使用#uniqueDomElement时），并避免考虑何时使用bind()不合适。

- Yahel

---

使用live()存在一些性能问题...这里有帮助：https://dev59.com/tnNA5IYBdhLWcg3wgeAc#937086，请阅读评论。 - John Hartsock

bind 用于已经存在的对象，live 用于在调用 live 后自动绑定到新创建的对象。 - Fosco

@John Hartsock，你真的应该把那个作为答案......我本来想回答的，但是我读了链接的评论后感觉现在回答没有意义 :P。 - Domenic

@Domenic。基本上这个问题已经在之前的问题中得到了回答。我只是评论了原始问题的链接，然后投票关闭。 - John Hartsock

@John Hartsock，我认为这并没有完全回答问题。nickf最接近回答我所寻找的内容（谈论它绑定到文档上以及可能的性能问题），但仅仅因为他顺便提到了它，并不意味着问题已经得到回答。 - Yahel

@John Hartsock，此外，那个问题并没有回答我的问题。当我搜索时，那个问题出现了；但是那个问题和被接受的答案都是关于这两个函数之间的区别，而不是默认使用live()的优势。 - Yahel

Answer 1

.live() 的主要缺点是它的重量（当使用大量.live()处理程序时），因为它将事件处理程序附加到document上，并且事件默认会冒泡到那里（这就是它的工作原理的全部基础），这意味着当事件到达文档时必须检查以下几点：

• 我是否有任何此事件类型的.live()事件？
• 如果有，事件来自的元素是否与这些.live()处理程序的任何选择器匹配？

第一个非常便宜，而第二个则不然。让我们以最常见的示例——单击事件为例。单击事件会冒泡，所以目前为止还不错。假设我们在document上注册了一个或多个单击.live()事件处理程序……现在我们必须循环遍历所有这些处理程序并比较它们的选择器与事件来自的元素，你拥有的处理程序越多，这个过程就越昂贵，并且在每次单击时都会发生，这是.live()的最大性能惩罚。

还有其他问题，例如附加/删除处理程序，但那是处理程序的管理……当你拥有大量处理程序时适用的上述性能问题是与直接.bind()调用进行比较的主要问题。

- Nick Craver

Answer 2

你在使用bind的时候可能会遇到的问题是，必须在元素出现在页面上之后才能调用bind。通常情况下，人们会在文档准备好后调用bind，以便将行为附加到页面上的元素上。如果通过JavaScript添加元素到页面中，则需要为新元素添加相同的绑定调用，这往往很繁琐，因此可以使用.live。

.live使用事件委派，这意味着jquery管理所有不同的.live调用，从而使得当您进行某种带有.live处理程序的操作时，它会检查您执行该操作的元素是否与给定选择器匹配（我认为是这样工作的）。我的猜测是它将事件添加到文档主体（适用于单击/鼠标动作）......我不确定具体细节，但我知道如果你把它用于所有东西，有时会出现一些奇怪的行为。通常最好在拥有大量将应用某些行为或者将通过JavaScript动态添加这些元素的情况下使用它。

详细信息请查看文档：http://api.jquery.com/live/。

- Matt Wolfe

Answer 3

这是一个平衡的过程。Live()将事件绑定到文档并搜索触发事件的目标。使用live（即一般的事件委托）的优点在于，您只需为无限数量的参数绑定一个事件处理程序。Bind()直接将事件处理程序附加到元素本身，因此如果您在表格中有1,000行，并运行$('tr').bind(...)，则会绑定1,000个事件处理程序。如果您使用$('tr').live(...)，那么您只会绑定一个事件处理程序。

您可以通过使用.delegate()来达到中间地带，它与live不同，因为您指定了事件的上下文。因此，它不会总是触发，因此更有效率。在表格示例中，您将使用$('table').delegate('tr', 'click', function() { .... });。您可以获得绑定和live的优点，同时最小化缺点：您只需绑定1个事件处理程序，它具有未来的保障（仅在该表格的上下文中），您不需要遍历整个DOM以查找'tr'元素。

Bind、live和delegate都有其适用场合。

另外，顺便提一下，委托是另一种实现 $('tr', $('table')[0]).live() 的方式，但那看起来很丑，因此委托存在。

- John Strickler

---

在我的看法中，IMO委托总是比.live更好，原因有两个： 1.您可以更具体地指定根注释的位置以使用事件委托， 2.它不会无谓地循环遍历所有匹配选择器的元素。 我的意思是，如果您调用$（“.livelink”）.live（...）; JQuery将循环遍历所有查找类.livelink的元素，然后什么也不做，因为处理程序甚至没有应用于链接。至少以前是这样，也许现在有些改变了。 - Matt Wolfe

@Matt 哦天啊，这篇文章已经一年了 :) delegate() 肯定比 live() 更好，当分配委托事件处理程序时，您希望尽可能狭窄地指定上下文，以减少需要检查的元素数量。我只有在绑定到文档级别时才会使用 live()。不过...我仍然会犹豫，以防 someday live() 被弃用。 - John Strickler