0

在这里寻找最佳实践。但我最近刚刚将一个应用程序从 jQuery 1.4 升级到 1.8，我正在慢慢地将所有live调用切换到on调用。

$(document).on('click', 'a.edit', function(){

从 ：

$("a.edit").live(function() {

  1. 将它绑定到比文档更具体的东西会更快吗？

  2. 这两个调用之间是否存在速度差异？

4

3 回答 3

4

现在将事件委托给文档意味着文档中的所有元素在单击时都会触发事件处理程序，然后它会检查目标是否匹配a.edit，这是很多检查。将其缩小到更接近的元素a.edit将意味着更少的元素触发事件处理程序，并且更少的元素来检查与指定目标的匹配。

来自 jQuery文档：

不再推荐使用 .live() 方法，因为更高版本的 jQuery 提供了没有缺点的更好方法。特别是，使用 .live() 会出现以下问题：

jQuery 在调用 .live() 方法之前尝试检索选择器指定的元素，这在大型文档上可能很耗时。不支持链接方法。例如， $("a").find(".offsite, .external").live( ... ); 无效且无法按预期工作。由于所有 .live() 事件都附加在文档元素上，因此事件在处理之前会采用最长和最慢的路径。在事件处理程序中调用 event.stopPropagation() 无法停止附加在文档下方的事件处理程序；该事件已经传播到文档。.live() 方法以令人惊讶的方式与其他事件方法进行交互，例如，$(document).unbind("click") 删除了所有对 .live() 的调用附加的点击处理程序！

它基本上是这样的：

$(document).click(function(e) {
    if (e.target == ourElement) {
        //hey, our element was clicked and bubbled all the way to the root, 
        //so let's do something
    }else{
        //we just jumped through some hoops, but this is not the element we 
        //are looking for, so do nothing...and we do this on every click !
    }
});
于 2012-08-27T16:44:27.500 回答
1

两种方法之间没有速度差异，因为它们都需要检查单击的元素是否a.edit存在 - 这将花费相同的时间。

但是调用检查的次数有所不同 - 如果您将侦听器附加到它，它将在每次点击document时触发。如果您以其他方式执行此操作，则更常见。

然而，两者之间的关键区别（无论速度如何）

$(document).on('click', 'a.edit', function(){

和

$('a.edit').on('click', function(){

是第一个将侦听器绑定到您以后可能创建click的所有现有和未来元素。第二个将侦听器仅绑定到现有元素。

于 2012-08-27T16:55:00.247 回答
1

扩展@adeneo的答案，

$(document).on('click','a.edit',function(){...});

将事件处理程序附加到文档。因为document是 DOM 的根，所以每个事件最终都会冒泡，document除非传播过程中的某个点停止。

在您的示例中，这意味着每次单击都会触发您的事件处理程序。然后，处理程序将检查event.target单击的来源是否与提供的选择器匹配（在本例中为a.edit）。考虑click是网页上发生的最常见事件之一，如果不是最常见的事件，那么这里将进行大量处理。

委派事件时的最佳实践是在您使用事件处理程序定位的元素中选择最接近的共同祖先（显然，该元素也必须在运行时存在，以便处理程序可以通过 jQuery 附加）。这将最大限度地减少不必要地触发事件处理程序的次数，并确保通过一次调用捕获所有目标元素.on

于 2012-08-27T16:50:47.977 回答