Question

如果此类有500个元素，是否会出现性能问题？

$('.class').hover(function handleIn() { /*code*/ },function handleOut() { /*code*/ });

Answer 1

您应该在悬停事件之外声明一次函数。所以它们只创建一次而不是500次：

 function handleIn(){}
 function handleOut(){} 

$('.class').hover(handleIn,handleOut);

Answer 2

如果有很多节点具有类名class（您提到500），jquery将为每个节点绑定500个不同的事件处理程序方法。与仅处理所有节点的一个事件处理程序相比，这当然要慢一些。

这是事件委托和事件冒泡的原则。如果存在所有这些.class个节点共享的父节点，则可以将任何事件委派给该父节点。当然，所有元素都共享document.body，因此为了演示它是：

$(document.body).delegate('.class', 'mouseenter', function(e) {
    // code when entering
}).delegate('.class', 'mouseleave', function(e) {
   // code when leaving
});

如上所述，document.body可以/应该被更接近节点的共享父节点替换。您还可以通过检查event object或this来区分这些委派事件处理程序中的悬停节点，如果调用则都引用当前节点。

我有关于jquery性能的问题

2 个答案: