事件绑定on与hover事件

今天项目中UI设计了一个鼠标划入和划出的效果，本来这个小效果是非常简单的！可是在实际的生产环境中就出现了一点点问题！因为在实际的环境中，数据全部是用ajax异步加载进去的，这样就造成了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事件。详细的信息请移步：http://www.runoob.com/jquery/event-on.html，delegate中第二个参数也就是咱们写的Li是必须的，不能缺少。如果不懂得话可以百度，也可以查看下面的链接http://www.jb51.net/article/46224.htm 而且我还发现，hover是jQuery自己封装的函数，并不是javascript的函数，并且

jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件。

jQuery 1.8 版本后该方法触发 mouseover 和 mouseout 事件。

也就是说hover时间在不同的jq版本中是不一样的，mouseenter是没有冒泡事件的，而mouseover会发生冒泡时间，mouseleave和mouseout一样。具体情况请看下面的小实验：http://www.runoob.com/try/try.php?filename=tryjquery_event_mouseenter_mouseover 相信看了这个后就非常清楚了。

　　回到咱们的问题，如果想给异步加载的Li加载上鼠标划入和划出事件，那就只能自己绑定两个事件了！

$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
    $(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
    $(this).removeClass('hover');
});

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

 

转载于:https://www.cnblogs.com/daniao11417/p/7552871.html