jQuery鼠标移动事件
概念
個人理解：
jQuery鼠標移動事件是最常用的鼠標事件之一，當用戶使用鼠標在指定的元素上移動時即與該元素產生交互，就會觸發鼠標移動事件，比如：鼠標在指定元素上移入、移出、懸停等等操作，都屬于鼠標移動事件的范圍。
mouseenter()&mouseleave() 事件函數
說明：
當鼠標指針穿過（進入）被選元素時，會發生 mouseenter 事件。mouseenter() 方法觸發 mouseenter 事件，或添加當發生 mouseenter 事件時運行的函數。
當鼠標指針離開被選元素時，會發生 mouseleave 事件。mouseleave() 方法觸發 mouseleave 事件，或添加當發生 mouseleave 事件時運行的函數。
通常mouseenter事件與mouseleave事件一起搭配使用。
語法：
觸發被選元素的?mouseenter與mouseleave?事件：
$(selector).mouseenter() $(selector).mouseleave()?添加函數到?mouseenter與mouseleave?事件：
$(selector).mouseenter(function) $(selector).mouseleave(function)解釋：
mouseenter()與mouseleave()事件函數的參數是回調函數，可選項，當mouseenter事件與mouseleave事件被觸發時，該回調函數就會執行。
示例：
<!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>鼠標移動到該段落。</p></body> </html>?mouseover()&mouseout() 事件函數
說明：
當鼠標指針位于元素上方時，會發生 mouseover 事件。mouseover() 方法觸發 mouseover 事件，或添加當發生 mouseover 事件時運行的函數。
當鼠標指針離開被選元素時，會發生 mouseout 事件。mouseout() 方法觸發 mouseout 事件，或添加當發生 mouseout 事件時運行的函數。
通常mouseover事件與mouseout事件會一起搭配使用。
語法：
觸發被選元素的?mouseover?與mouseout事件：?
$(selector).mouseover() $(selector).mouseout()?添加函數到?mouseover與mouseout?事件：
$(selector).mouseover(function) $(selector).mouseout(function)解釋：
mouseover()與mouseout()事件函數的參數是回調函數，可選項，當mouseover事件與mouseout事件觸發時，該回調函數執行。
示例：
<!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>鼠標移動到這個段落上。</p></body> </html>鼠標移入與移出事件對比
mouseenter與mouseover事件的區別：
- mouseover?事件在鼠標移動到選取的元素及其子元素上時觸發 。
- mouseenter?事件只在鼠標移動到選取的元素上時觸發。
?mouseleave與mouseout事件的區別：?
- mouseout?事件在鼠標離開任意一個子元素及選的元素時觸發。
- mouseleave?事件只在鼠標離開選取的的元素時觸發。
詳細解釋可以查看jQuery事件冒泡相關詞條。
mousemove() 事件函數
說明：
當鼠標指針在指定的元素中移動時，就會發生 mousemove 事件。mousemove() 方法觸發 mousemove 事件，或添加當發生 mousemove 事件時運行的函數。
用戶把鼠標移動一個像素，就會發生一次 mousemove 事件。處理所有 mousemove 事件會耗費系統資源。請謹慎使用該事件。
語法：
觸發被選元素的?mousemove?事件：
$(selector).mousemove()?添加函數到?mousemove?事件：
$(selector).mousemove(function)解釋：
mousemove()函數的參數是回調函數，可選項，當mousemove事件觸發時，該函數就會被執行。
示例：
<!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>鼠標指針的坐標是: <span></span>.</p></body> </html>總結
以上是生活随笔為你收集整理的jQuery鼠标移动事件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 空间音频已来，TWS 4.0时代已来！T
- 下一篇： 家庭网络设备组织结构