JS綁定.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事件。詳細的信息請移步：www.runoob.com/jquery/even…，delegate中第二個參數也就是我們寫的Li是必須的，不能缺乏。若是不懂得話能夠百度，也能夠查看下面的連接www.jb51.net/article/462… 並且我還發現，hover是jQuery本身封裝的函數，並非javascript的函數，而且

jQuery 1.7 版本前該方法觸發 mouseenter 和 mouseleave 事件。

jQuery 1.8 版本後該方法觸發 mouseover 和 mouseout 事件。

也就是說hover時間在不一樣的jq版本中是不同的，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');
});複製代碼

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