jQuery常用事件方法mouseenter+mouseleave+hover

更新時(shí)間：2022年03月20日 09:57:25 作者：小白可別不舉鐵

這篇文章主要介紹了jQuery常用事件方法mouseenter、mouseleave和hover方法，下文內(nèi)容介紹詳細(xì)，需要的小伙伴可以參考一下

jQuery常用事件方法：

jQuery事件方法與原生Js事件方法名稱類似,不需要寫(xiě)on,通過(guò)jQuery對(duì)象打點(diǎn)調(diào)用,括號(hào)內(nèi)參數(shù)是事件函數(shù)
mouseenter()方法:鼠標(biāo)進(jìn)入一個(gè)元素觸發(fā)的事件
mouseleave()方法:鼠標(biāo)離開(kāi)一個(gè)元素觸發(fā)的事件

注意:mouseenter和mouseleave沒(méi)有事件冒泡,在使用時(shí)替換mouseover和mouseout更加合適

下面是代碼對(duì)比：

<div class="parent">
? ?<div class="box"></div>
</div>
?<script src="../jq/jquery-1.12.4.min.js"></script>
? ?<script>
? ? ?var $box = $(".box");
? ? ?var $parent = $(".parent");
? ? ?//對(duì)比mouseenter、mouseleave 和 mouseover、mouseout
? ? ?// 對(duì)比mouseenter、mouseleave 不冒泡
? ? ?$box.mouseenter(function(){
? ? ? ? console.log("box mouse in")
? ? ? })
? ? ?$box.mouseleave(function(){
? ? ? ? console.log("box mouse out")
? ? ?})
? ? ?$parent.mouseenter(function(){
? ? ? ? console.log("parent mouse in")
? ? ?})
? ? ?$parent.mouseleave(function(){
? ? ? ? console.log("parent mouse out")
? ? ?})

//mouseover、mouseout ?冒泡
$box.mouseover(function(){
? ? console.log("box mouse in")
})
$box.mouseout(function(){
? ? console.log("box mouse out")
})
$parent.mouseover(function(){
? ? console.log("parent mouse in")
})
$parent.mouseout(function(){
? ? console.log("parent mouse out")
})

hover()方法:相當(dāng)于將mouseenter和mouseleave事件進(jìn)行了合寫(xiě)

hover(鼠標(biāo)移上執(zhí)行的事件函數(shù),鼠標(biāo)離開(kāi)執(zhí)行的事件函數(shù))

//hover() 對(duì)mouseenter和mouseleave合并書(shū)寫(xiě)
//$box.hover(function () { }, function () { })
$box.hover(function(){
? ? $box.addClass("big");
},function(){
? ?$box.removeClass("big")
})

到此這篇關(guān)于jQuery常用事件方法mouseenter+mouseleave+hover方法的文章就介紹到這了,更多相關(guān)jQuery常用事件方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

在jQuery中使用$而避免跟其它庫(kù)產(chǎn)生沖突的方法
這篇文章主要介紹了在jQuery中使用$而避免跟其它庫(kù)產(chǎn)生沖突的方法,總共羅列了三種,需要的朋友可以參考下
2015-08-08
jquery JSON的解析方式
第一次用JSON作為jquery異步請(qǐng)求的傳輸對(duì)象，結(jié)果在jquery請(qǐng)求后返回的結(jié)果是字符串還是json對(duì)象上折騰了半天。等到問(wèn)題解決了，也大致明白怎么個(gè)意思了，歸根結(jié)底還是對(duì)jquery對(duì)相關(guān)json對(duì)象獲取的理解有所偏差。
2009-07-07
jquery的ajax從純真網(wǎng)(cz88.net)獲取IP地址對(duì)應(yīng)地區(qū)名
使用jquery的ajax，輕松從純真網(wǎng)(cz88.net)獲取IP地址對(duì)應(yīng)地區(qū)名
2009-12-12
通過(guò)jquery實(shí)現(xiàn)tab標(biāo)簽瀏覽效果
這篇文章主要介紹了通過(guò)jquery實(shí)現(xiàn)tab標(biāo)簽瀏覽效果
2007-02-02
jQuery $.extend()用法總結(jié)
這篇文章主要介紹了jQuery $.extend()用法,需要的朋友可以參考下
2014-06-06
jQuery效果 slideToggle() 方法(在隱藏和顯示之間切換)
slideToggle() 方法通過(guò)使用滑動(dòng)效果（高度變化）來(lái)切換元素的可見(jiàn)狀態(tài)。
2011-06-06
修復(fù)jQuery tablesorter無(wú)法正確排序的bug(加千分位數(shù)字后)
這篇文章主要介紹了如何修復(fù)jQuery tablesorter無(wú)法正確排序的bug(加千分位數(shù)字后)的相關(guān)資料,需要的朋友可以參考下
2016-03-03
jQuery實(shí)現(xiàn)簡(jiǎn)易聊天框
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)易聊天框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
jQuery 錨點(diǎn)跳轉(zhuǎn)滾動(dòng)條平滑滾動(dòng)一句話代碼
jQuery 錨點(diǎn)跳轉(zhuǎn)滾動(dòng)條平滑滾動(dòng)一句話代碼,需要的朋友可以參考下。
2010-04-04
jQuery對(duì)象和DOM對(duì)象的相互轉(zhuǎn)化實(shí)現(xiàn)代碼
jQuery對(duì)象就是通過(guò)jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象。jQuery對(duì)象是jQuery獨(dú)有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如$("#img").attr("src","test.jpg"); 這里的$("#img")就是jQuery對(duì)象；
2010-03-03