javascript - jQuery 的 live() 函数的性能损失

Question

对于某些元素，无论何时将鼠标悬停在它们上面，我都希望元素变大，然后在取消悬停时缩小。所以我简单地使用 $('.elementClass').hover(function() { enlarge(this); }, function() { shrink(this); });。我把它放在所有网页的 $(function() { }); 区域，因为许多网页都有这些元素。

有时我需要创建新的动态元素，它们上面有这些元素。当然，我必须为它们重新调用上面的悬停函数，因为它们一开始是不存在的。

似乎最方便的是简单地拥有一整套 $('.variousClasses').live('variousEvents', function() { }); 在每个网页中调用所有可能的功能，如上。

所以问题是，如果调用 live() 如此多次，即使是在永远不会触发那些永远不会存在的事件或元素上的元素上，是否会有性能损失？重要的是我要小心仅在需要时仅调用hover() 或live('hover')(和其他事件)吗？

Answer 1

作为对您问题的一般回答，您应该尽量减少无关的函数调用——在动态内容情况下可能更是如此。

特别是，live() 是用于此问题的一个很好的示例，因为它确实带有一些(潜在的)重要的性能并发症。当您调用 live() 时，jQuery 会将您选择的事件绑定(bind)到 document 对象。这意味着每次触发事件时，它都会从原始元素冒泡到 document 对象。根据您的网站结构(一般来说)，这可能会很昂贵。

使用 delegate() 的更好选择

最好使用 jQuery 的 delegate() 函数，特别是如果您有一个预定义的父容器元素，您的所有事件都将在其中触发。当您使用 delegate() 时，您基本上是在使用 live() 的受限版本，以便事件仅传播到指定的父元素。因此，您可以避免在您不关心的元素上触发许多可能代价高昂的事件。

在您的情况下，由于您使用的是动态生成的内容，因此您要么必须使用上述函数，要么设置您的代码，以便在将元素插入 DOM 时，它还将事件处理程序绑定(bind)到它。前者可能更容易，但后者可以提供略微(可能难以辨认)更好的性能。