jQuery鼠标移动事件
概念
個(gè)人理解：
jQuery鼠標(biāo)移動(dòng)事件是最常用的鼠標(biāo)事件之一，當(dāng)用戶使用鼠標(biāo)在指定的元素上移動(dòng)時(shí)即與該元素產(chǎn)生交互，就會(huì)觸發(fā)鼠標(biāo)移動(dòng)事件，比如：鼠標(biāo)在指定元素上移入、移出、懸停等等操作，都屬于鼠標(biāo)移動(dòng)事件的范圍。
mouseenter()&mouseleave() 事件函數(shù)
說明：
當(dāng)鼠標(biāo)指針穿過（進(jìn)入）被選元素時(shí)，會(huì)發(fā)生 mouseenter 事件。mouseenter() 方法觸發(fā) mouseenter 事件，或添加當(dāng)發(fā)生 mouseenter 事件時(shí)運(yùn)行的函數(shù)。
當(dāng)鼠標(biāo)指針離開被選元素時(shí)，會(huì)發(fā)生 mouseleave 事件。mouseleave() 方法觸發(fā) mouseleave 事件，或添加當(dāng)發(fā)生 mouseleave 事件時(shí)運(yùn)行的函數(shù)。
通常mouseenter事件與mouseleave事件一起搭配使用。
語法：
觸發(fā)被選元素的?mouseenter與mouseleave?事件：
$(selector).mouseenter() $(selector).mouseleave()?添加函數(shù)到?mouseenter與mouseleave?事件：
$(selector).mouseenter(function) $(selector).mouseleave(function)解釋：
mouseenter()與mouseleave()事件函數(shù)的參數(shù)是回調(diào)函數(shù)，可選項(xiàng)，當(dāng)mouseenter事件與mouseleave事件被觸發(fā)時(shí)，該回調(diào)函數(shù)就會(huì)執(zhí)行。
示例：
<!DOCTYPE html> <html><head><meta charset="utf-8"><script src="jquery.min.js"></script><script>$(document).ready(function(){$("p").mouseenter(function(){$("p").css("background-color","yellow");});$("p").mouseleave(function(){$("p").css("background-color","lightgray");});});</script></head><body><p>鼠標(biāo)移動(dòng)到該段落。</p></body> </html>?mouseover()&mouseout() 事件函數(shù)
說明：
當(dāng)鼠標(biāo)指針位于元素上方時(shí)，會(huì)發(fā)生 mouseover 事件。mouseover() 方法觸發(fā) mouseover 事件，或添加當(dāng)發(fā)生 mouseover 事件時(shí)運(yùn)行的函數(shù)。
當(dāng)鼠標(biāo)指針離開被選元素時(shí)，會(huì)發(fā)生 mouseout 事件。mouseout() 方法觸發(fā) mouseout 事件，或添加當(dāng)發(fā)生 mouseout 事件時(shí)運(yùn)行的函數(shù)。
通常mouseover事件與mouseout事件會(huì)一起搭配使用。
語法：
觸發(fā)被選元素的?mouseover?與mouseout事件：?
$(selector).mouseover() $(selector).mouseout()?添加函數(shù)到?mouseover與mouseout?事件：
$(selector).mouseover(function) $(selector).mouseout(function)解釋：
mouseover()與mouseout()事件函數(shù)的參數(shù)是回調(diào)函數(shù)，可選項(xiàng)，當(dāng)mouseover事件與mouseout事件觸發(fā)時(shí)，該回調(diào)函數(shù)執(zhí)行。
示例：
<!DOCTYPE html> <html><head><meta charset="utf-8"> <script src="jquery.min.js"></script><script>$(document).ready(function(){$("p").mouseover(function(){$("p").css("background-color","yellow");});$("p").mouseout(function(){$("p").css("background-color","lightgray");});});</script></head><body><p>鼠標(biāo)移動(dòng)到這個(gè)段落上。</p></body> </html>鼠標(biāo)移入與移出事件對(duì)比
mouseenter與mouseover事件的區(qū)別：
- mouseover?事件在鼠標(biāo)移動(dòng)到選取的元素及其子元素上時(shí)觸發(fā) 。
- mouseenter?事件只在鼠標(biāo)移動(dòng)到選取的元素上時(shí)觸發(fā)。
?mouseleave與mouseout事件的區(qū)別：?
- mouseout?事件在鼠標(biāo)離開任意一個(gè)子元素及選的元素時(shí)觸發(fā)。
- mouseleave?事件只在鼠標(biāo)離開選取的的元素時(shí)觸發(fā)。
詳細(xì)解釋可以查看jQuery事件冒泡相關(guān)詞條。
mousemove() 事件函數(shù)
說明：
當(dāng)鼠標(biāo)指針在指定的元素中移動(dòng)時(shí)，就會(huì)發(fā)生 mousemove 事件。mousemove() 方法觸發(fā) mousemove 事件，或添加當(dāng)發(fā)生 mousemove 事件時(shí)運(yùn)行的函數(shù)。
用戶把鼠標(biāo)移動(dòng)一個(gè)像素，就會(huì)發(fā)生一次 mousemove 事件。處理所有 mousemove 事件會(huì)耗費(fèi)系統(tǒng)資源。請(qǐng)謹(jǐn)慎使用該事件。
語法：
觸發(fā)被選元素的?mousemove?事件：
$(selector).mousemove()?添加函數(shù)到?mousemove?事件：
$(selector).mousemove(function)解釋：
mousemove()函數(shù)的參數(shù)是回調(diào)函數(shù)，可選項(xiàng)，當(dāng)mousemove事件觸發(fā)時(shí)，該函數(shù)就會(huì)被執(zhí)行。
示例：
<!DOCTYPE html> <html><head><meta charset="utf-8"> <script src="jquery.min.js"></script><script>$(document).ready(function(){$(document).mousemove(function(event){$("span").text(event.pageX + ", " + event.pageY);});});</script></head><body><p>鼠標(biāo)指針的坐標(biāo)是: <span></span>.</p></body> </html>總結(jié)
以上是生活随笔為你收集整理的jQuery鼠标移动事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 空间音频已来，TWS 4.0时代已来！T
- 下一篇： 家庭网络设备组织结构