JS绑定.on的hover事件

今天在项目中UI设计了一个鼠标划入和划出的效果，发现由于数据是通过Ajax异步加载，导致hover方法无法使用。最初使用的是jQuery的hover事件，但后来改用on事件绑定到父元素ul上，发现效果不好。经过进一步研究发现，hover事件在jQuery 1.7版本中触发的是mouseenter和mouseleave事件，而在1.8版本中触发的是mouseover和mouseout事件。因此，改用绑定mouseenter和mouseleave事件，成功实现了鼠标的划入和划出效果。

今天在项目中，UI实现了鼠标划入和划出的效果，这个功能相对简单。然而，在实际的生产环境中，遇到了一些问题。因为数据采用异步加载方式，导致hover效果无法实现。先来看一下原始代码：

 1 $('ul li').hover(function(){

    
 2     $(this).addClass('hover');
    
 3 },function(){
    
 4     $(this).removeClass('hover');
    
 5 })复制代码

原理也非常简单，就是在鼠标进入事件触发的时候，我们为这个Li元素添加hover类名，随后在鼠标离开事件发生时，及时删除该类名。这种相对简单的交互效果能够有效提升用户体验。在进行AJAX异步加载时，我们需要将相关事件绑定到父元素ul上（因为li是动态添加的），从而实现了以下代码。

 1 $('ul').on('hover','li',function(){

    
 2     $(this).addClass('hover');
    
 3 },function(){
    
 4     $(this).removeClass('hover');
    
 5 })复制代码

后来发现并不能行啊！！！想想也是啊，为什么第三个参数！

这里需要复习on的使用方法。我们这里采用的on事件实际上是原delegate事件。具体信息可参考以下链接：www.runoob.com/jquery/even…。在delegate函数中，第二个参数，即咱们所写的Li，是必需的，不能省略。如果对此理解不够深入，可以参考下面的链接进一步学习：www.jb51.net/article/462…。值得注意的是，hover是jQuery封装的专用函数，而非JavaScript原生函数。

在jQuery 1.7版本之前，该方法会响应mouseenter和mouseleave事件。

该方法在版本更新后响应mouseover和mouseout事件的触发。

值得注意的是，不同jQuery版本中的hover时间设置有所差异。具体来说，mouseenter事件不会触发冒泡事件，而mouseover事件则会触发冒泡效果。至于mouseleave和mouseout事件，在大多数情况下会表现出相同的行为。为了更直观地了解相关内容，您可以参考下面的实验演示：www.runoob.com/try/try.php…。通过这个小实验，相信您很快就能掌握这些细节。

针对咱们的问题，为了给异步加载的Li绑定鼠标划入和划出事件，只能为该组件绑定两个特定的鼠标事件。

 $('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件

    
     $(this).addClass('hover');
    
 });
    
 $('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
    
     $(this).removeClass('hover');
    
 });复制代码

这样的话就能实现鼠标的事件了！