性能问题:通用选择器与单独绑定

performance issue : generic selector vs individual binding

本文关键字：单独 绑定 选择器 问题 性能      更新时间：2023-09-26

因此，在我的页面中，我将插入一系列元素，比如类名为"element"，但其中一些元素将被禁用，这将导致额外的类"disabled"。现在我想将一个点击事件绑定到所有未禁用的元素，我只是想知道在性能方面是否只写更好

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

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

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

一般经验法则：在发现性能问题之前，不要进行优化。

如果页面上有一万个元素，您可能会注意到:not()选择器有点慢，但如果页面中有一万个元件，则说明您的设计出现了严重错误。

我怀疑页面上有一些（>1和<100）元素，在这种情况下，选择器的性能会很好！

首先，您不应该再使用.live()了，因为所有版本的jQuery都不赞成使用它。我建议这样做：

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

这应该不会有什么性能问题，因为只有在点击时才会与选择器进行比较，而当比较完成时，这是一个相当简单的比较，只检查目标的类名。

此外，由于点击是在用户时间内发生的用户操作，并且选择器比较一点也不复杂，因此任何延迟都不太可能被通知（我们在这里谈论的最多是毫秒）。

如果您没有注意到性能问题，就不需要进行任何修复！

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

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

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

相关文章：