比将多个事件处理程序附加到DOM中的元素更好的方法

Question

我目前正在考虑一些效率/速度问题.

我有大约40个元素和div嵌套在li中

<ul id=ul>  
<li><a href="#">Link</a><div>Text</div></li>  
<li><a href="#">Link</a><div>Text</div></li>  
<li><a href="#">Link</a><div>Text</div></li>  
<li><a href="#">Link</a><div>Text</div></li>  
<li><a href="#">Link</a><div>Text</div></li>  
....   
</ul>

在所有的李,我有悬停事件附加

$('#ul li').hover(function(e){
    $(this).children(div).show();},
function(){
    $(this).children(div).hide();
})

我想知道是否有更好的方法,而不是将40个事件处理程序附加到dom上进行悬停事件.我认为在某些浏览器中这可能会很慢.

我听说过DOM遍历,比如当你在#ul容器上只放置一个处理程序并让dom在浏览器中遍历时(e.target)找出已经悬停的元素.有人知道如何解决这个问题吗？

Answer 1

.delegate() 做你所描述的:

$('#ul').delegate('li', 'mouseenter', function (e) {...});
$('#ul').delegate('li', 'mouseleave', function (e) {...});

请注意,这.hover()只是两个事件的快捷方式,mouseenter和mouseleave,因此对.degelate()上面的两个调用.

即使.delegate()被调用$('#ul'),$(this)也会引用<li>事件处理程序中的元素.