javascript - 性能问题：通用选择器与单独绑定

Question

所以在我的页面中，我将插入一系列元素，比如说类名“元素”，但其中一些将被禁用，这将获得额外的类“禁用”。现在我想将一个点击事件绑定到所有非禁用元素，我只是想知道性能方面是否最好只写

$(".element:not(.disabled)") .live("click",function() { ...

还是应该在插入每个元素时将点击事件绑定到它们？

ps 我知道 .on 已经取代了 .live，但现在我使用的是 1.6.2 版本，所以无法更改

Answer 1

一般经验法则：在您确定某事为性能问题之前不要进行优化。

如果页面上有一万个元素，您可能会注意到:not()选择器有点慢，但是如果页面上有一万个元素，则说明您的设计存在严重问题。

我怀疑页面上有少量（>1 和 <100）元素，在这种情况下，选择器会执行得很好！

Answer 2

首先，你不应该再使用.live()它，因为它已被所有版本的 jQuery 弃用。我建议这样做：

$(document).on('click', '.element:not(.disabled)', function() {...});

这应该没有什么性能问题，因为与选择器的比较仅在发生单击时发生，并且当比较完成时，仅检查目标的类名是一个相当简单的比较。

此外，由于单击是在用户时间内发生的用户操作，并且选择器比较根本不复杂，因此任何延迟都不太可能引起注意（我们在这里最多讨论毫秒）。

Answer 3

如果您没有注意到性能问题，则不需要修复它！

我个人会附加点击事件，然后对它们进行检查。像这样：

$(".element").on("click",function() { 
  var $this = $(this);
  if ($this.hasClass("disabled")) return;

  //Continue here
});

此外，您应该使用.on而不是.live现在已弃用。文档。