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>

在所有的li上，我有悬停事件附加

$('#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>元素。

Answer 2

我认为你真正想要的是使用jQuery的delegate()

Answer 3

您可以使用CSS来显示/隐藏div：

#ul li div
{
    display: none;
}  

#ul li:hover div
{
    display: block;
}

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

3 个答案: