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

【问题标题】：A better way than attaching multiple event handlers to elements in the DOM比将多个事件处理程序附加到 DOM 中的元素更好的方法
【发布时间】：2011-02-25 04:29:45
【问题描述】：

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

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

<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´s 上我都附加了悬停事件

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

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

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

【问题讨论】：

标签： jquery hover event-handling

【解决方案1】：

.delegate() 按照你的描述做：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

#ul li div
{
    display: none;
}  

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

【讨论】：

我认为您的意思是display: block 并添加#ul li div {display: none}？