事件綁定on與hover事件

今天項目中UI設計了一個鼠標划入和划出的效果，本來這個小效果是非常簡單的！可是在實際的生產環境中就出現了一點點問題！因為在實際的環境中，數據全部是用ajax異步加載進去的，這樣就造成了hover方法不能用了。先看一下原來的代碼：

$('ul li').hover(function(){
    $(this).addClass('hover');
},function(){
    $(this).removeClass('hover');
})

原理也非常簡單，就是在鼠標進入的時候，給這個Li加入hover的類名，然后鼠標划出的時候刪除這個類名。非常簡單的小效果。ajax異步加載我們就要用事件綁定了，把這個事件綁定在他們的父元素ul上（li是動態異步添加的），於是有了下面的代碼：

$('ul').on('hover','li',function(){
    $(this).addClass('hover');
},function(){
    $(this).removeClass('hover');
})

后來發現並不能行啊！！！想想也是啊，為什么第三個參數！

　　這里就要復習一下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');
});

這樣的話就能實現鼠標的事件了！