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

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

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

jQuery常用事件方法：

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

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

//hover() 對(duì)mouseenter和mouseleave合并書寫
//$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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: