jQuery鼠标移动事件

Love The Way You Lie 2023-06-30 09:23 30阅读 0赞

### 概念 ###

> **个人理解：**
> 
> 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>

### 经验分享 ###

鼠标移动事件在做网页特效开发时是最常用的事件之一，也是实现用户交互的基本事件，所以掌握好常用的鼠标移动事件，对以后做网页中的特效有很大的帮助。

> 微信交流：zzxingyun