jQuery的live()方法對(duì)hover事件的處理示例
更新時(shí)間：2014年02月27日 14:50:53 作者：
一個(gè)模仿懸停事件的方法，當(dāng)鼠標(biāo)移動(dòng)到一個(gè)匹配的元素上面時(shí)，會(huì)觸發(fā)指定的第一個(gè)函數(shù)
hover([over,]out)
一個(gè)模仿懸停事件（鼠標(biāo)移動(dòng)到一個(gè)對(duì)象上面及移出這個(gè)對(duì)象）的方法
當(dāng)鼠標(biāo)移動(dòng)到一個(gè)匹配的元素上面時(shí)，會(huì)觸發(fā)指定的第一個(gè)函數(shù)。
當(dāng)鼠標(biāo)移出這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)。
$('.myDiv').hover(function() {
doSomething...
}, function() {
doSomething...
});
而問題是有些元素比如菜單是通過AJAX動(dòng)態(tài)加載的，hover方法執(zhí)行的時(shí)候
菜單還沒加載出來呢，所以就要用到j(luò)query的另一個(gè)方法live()
.live() 方法能對(duì)一個(gè)還沒有添加進(jìn)DOM的元素有效，是由于使用了事件委托：
綁定在祖先元素上的事件處理函數(shù)可以對(duì)在后代上觸發(fā)的事件作出回應(yīng)。
傳遞給 .live() 的事件處理函數(shù)不會(huì)綁定在元素上，
而是把他作為一個(gè)特殊的事件處理函數(shù)，綁定在 DOM 樹的根節(jié)點(diǎn)上。
$('.myDiv').live('hover',function(event){
if(event.type=='mouseenter'){
doSomething...
}else{
doSomething...
}
})
有的jquery版本響應(yīng)的是mouseenter和mouseleave
有的是mouseover和mouseout
待考證......
一個(gè)模仿懸停事件（鼠標(biāo)移動(dòng)到一個(gè)對(duì)象上面及移出這個(gè)對(duì)象）的方法
當(dāng)鼠標(biāo)移動(dòng)到一個(gè)匹配的元素上面時(shí)，會(huì)觸發(fā)指定的第一個(gè)函數(shù)。
當(dāng)鼠標(biāo)移出這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)。
復(fù)制代碼 代碼如下:
$('.myDiv').hover(function() {
doSomething...
}, function() {
doSomething...
});
而問題是有些元素比如菜單是通過AJAX動(dòng)態(tài)加載的，hover方法執(zhí)行的時(shí)候
菜單還沒加載出來呢，所以就要用到j(luò)query的另一個(gè)方法live()
.live() 方法能對(duì)一個(gè)還沒有添加進(jìn)DOM的元素有效，是由于使用了事件委托：
綁定在祖先元素上的事件處理函數(shù)可以對(duì)在后代上觸發(fā)的事件作出回應(yīng)。
傳遞給 .live() 的事件處理函數(shù)不會(huì)綁定在元素上，
而是把他作為一個(gè)特殊的事件處理函數(shù)，綁定在 DOM 樹的根節(jié)點(diǎn)上。
復(fù)制代碼 代碼如下:
$('.myDiv').live('hover',function(event){
if(event.type=='mouseenter'){
doSomething...
}else{
doSomething...
}
})
有的jquery版本響應(yīng)的是mouseenter和mouseleave
有的是mouseover和mouseout
待考證......
您可能感興趣的文章:
- 使用jquery給新生的th綁定hover事件的實(shí)例
- 淺談jQuery hover(over, out)事件函數(shù)
- jQuery hover事件簡(jiǎn)單實(shí)現(xiàn)同時(shí)綁定2個(gè)方法
- jquery中取消和綁定hover事件的實(shí)現(xiàn)代碼
- jQuery實(shí)現(xiàn)hover合成事件的方法
- JQuery中使用on方法綁定hover事件實(shí)例
- jQuery中多個(gè)元素的Hover事件解決方案
- jQuery 鼠標(biāo)經(jīng)過(hover)事件的延時(shí)處理示例
- 使用jquery hover事件實(shí)現(xiàn)表格的隔行換色功能示例
- 完美解決jQuery的hover事件在IE中不停閃動(dòng)的問題
相關(guān)文章
如果您想繼續(xù)使用原先的$()，同時(shí)還需要與別的類庫不沖突的話，下面由兩種方法，有類似需求的朋友可以參考下，希望對(duì)大家有所幫助2013-09-09
基于JSON格式數(shù)據(jù)的簡(jiǎn)單jQuery幻燈片插件(jquery-slider)
jquery-slider幻燈片插件通過json數(shù)據(jù)來提供圖片地址和描述信息，同時(shí)也可以更換json數(shù)據(jù)來動(dòng)態(tài)切換不同的圖片，對(duì)json數(shù)據(jù)jquery幻燈片插件相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-08-08
jquery預(yù)覽圖片實(shí)現(xiàn)鼠標(biāo)放上去顯示實(shí)際大小
本文為大家介紹的這個(gè)示例為jquery實(shí)現(xiàn)的預(yù)覽圖片，當(dāng)鼠標(biāo)放上去顯示實(shí)際大小，感興趣的朋友可以學(xué)習(xí)下2014-01-01
jQuery接受后臺(tái)傳遞的List的實(shí)例詳解
這篇文章主要介紹了jQuery接受后臺(tái)傳遞的List的實(shí)例詳解的相關(guān)資料,這里提供了前臺(tái)代碼和后臺(tái)代碼的實(shí)現(xiàn)，需要的朋友可以參考下2017-08-08
本篇文章主要介紹了Jquery-data的三種用法。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
jQuery實(shí)現(xiàn)下拉加載功能實(shí)例代碼
本文通過一段實(shí)例代碼給大家介紹jquery實(shí)現(xiàn)下拉加載功能，代碼簡(jiǎn)單易懂，需要的朋友參考下吧2016-04-04
jQuery 獲取對(duì)象 基本選擇與層級(jí)實(shí)現(xiàn)代碼，學(xué)習(xí)jquery的朋友可以參考下。2010-05-05
jQuery仿Excel表格編輯功能的實(shí)現(xiàn)代碼
Handsontable 是一個(gè)相當(dāng)給力的 jQuery 插件，它實(shí)現(xiàn)了 HTML 頁面中的表格編輯功能，并且是仿 Excel 的編輯效果。2013-05-05
如果你還在猶豫是否要學(xué)習(xí)一個(gè)JavaScript框架，并困惑于選擇哪一個(gè)框架，那么我推薦你選擇jQuery。這并非說其它框架不好，只是jQuery可能是最穩(wěn)妥和最具回報(bào)性的選擇。2011-04-04
寫js已經(jīng)有很久了，但是對(duì)js的詳細(xì)了解還是很膚淺的，這幾天在看jquery，在其中有一些新的發(fā)現(xiàn)和體會(huì)，記錄下來2011-11-11