jQuery鼠标移动事件

x33g5p2x  于2022-03-06 转载在 其他  
字(3.1k)|赞(0)|评价(0)|浏览(345)

概念

个人理解:

jQuery鼠标移动事件是最常用的鼠标事件之一,当用户使用鼠标在指定的元素上移动时即与该元素产生交互,就会触发鼠标移动事件,比如:鼠标在指定元素上移入、移出、悬停等等操作,都属于鼠标移动事件的范围。

mouseenter()&mouseleave() 事件函数

说明:

当鼠标指针穿过(进入)被选元素时,会发生 mouseenter 事件。mouseenter() 方法触发 mouseenter 事件,或添加当发生 mouseenter 事件时运行的函数。
当鼠标指针离开被选元素时,会发生 mouseleave 事件。mouseleave() 方法触发 mouseleave 事件,或添加当发生 mouseleave 事件时运行的函数。

通常mouseenter事件与mouseleave事件一起搭配使用。
语法:

触发被选元素的 mouseentermouseleave 事件:

$(selector).mouseenter()
$(selector).mouseleave()

添加函数到 mouseentermouseleave 事件:

$(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事件会一起搭配使用。
语法:

触发被选元素的 mouseovermouseout事件:

$(selector).mouseover()
$(selector).mouseout()

添加函数到 mouseovermouseout 事件:

$(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

相关文章