<1>

HTML

<html>

<head>

    <title></title>

</head>

<body>

    <p> 当鼠标进入div1的时候会触发mouseover事件，由于btn1和btn2是包裹在div1下的子元素，所以当鼠标从div1进入到子元素btn1的时候又会触发mouseover事件 ,当鼠标从btn1进入到btn2的时候又会再次触发mouseover事件。当鼠标离开btn2元素本身 进入到div1的时候，又会触发mouseover</p>

    <div style=" border:10px solid red" id="div1">

        <input type="button" value="0" id="btn1" />

        <input type="button" value="btn2" id="btn2" style=" margin-left:40px" />

    </div>

    <p>  当鼠标进入到div2的时候就会触发mousemove事件。进入div2后【仅仅要移动一个像素点】都会触发mousemove事件 [请慎重使用，耗资源]</p>

    <div style=" border:10px solid red" id="div2">

        <input type="button" value="0" id="btn3" />

        <input type="button" value="btn4" id="btn4" style=" margin-left:40px" />

    </div>

    <p>仅仅有当鼠标进入【被选中】控件div3的时候才会触发mouseenter事件。当鼠标进入【被选中】控件的【子元素】的时候而没有离开被选中控件本身的时候【不会再次】触发</p>

    <div style=" border:10px solid red" id="div3">

        <input type="button" value="0" id="btn5" />

        <input type="button" value="btn6" id="btn6" style=" margin-left:40px" />

    </div>

    <p>当鼠标离开的div4的时候就会触发mouseout事件，当鼠标进入div4的子控件btn7后。离开btn7就会再次触发mouseout事件，当鼠标从btn7进入btn8,后。离开btn8的时候也会再次触发mouseout事件。

</p>

    <div style=" border:10px solid red" id="div4">

        <input type="button" value="0" id="btn7" />

        <input type="button" value="btn8" id="btn8" style=" margin-left:40px" />

    </div>

    <p>仅仅有当鼠标离开【被选中】控件的时候才会触发mouseleave事件；当鼠标离开【被选中】的【子元素】而【没有离开被选中的控件】的时候【不会再次】触发</p>

    <div style=" border:10px solid red" id="div5">

        <input type="button" value="0" id="btn9" />

        <input type="button" value="btn10" id="btn10" style=" margin-left:40px" />

    </div>

</body>

</html>

<script src="script/jquery-1.11.0.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    //<!--不论鼠标指针进入被选元素或其子元素，都会触发 mouseover 事件-->

        $(function () {                                                    //-------mouseover 鼠标进入

            $("#div1").mouseover(function () {

                $("#btn1").val(parseInt($("#btn1").val()) + 1)

            })

            //当鼠标进入div1的时候会触发mouseover事件，由于btn1和btn2是包裹在div1下的子元素。所以当鼠标从div1进入到子元素 btn1的时候又会触发mouseover事件 ,当鼠标从btn1进入到btn2的时候又会再次触发mouseover事件，当鼠标离开btn2元素本身 进入到div1的时候，又会触发mouseover

        })

        //---------------------------------------------------------------------------------------------------------

        $(function () {                                                    //-------mousemove 鼠标进入

            $("#div2").mousemove(function () {

                $("#btn3").val(parseInt($("#btn3").val()) + 1)

            })

            //<!--当鼠标进入到div2的时候就会触发mousemove事件。进入div2后【仅仅要移动一个像素点】都会触发mousemove事件 [请慎重使用。耗资源]-->

        });

        //---------------------------------------------------------------------------------------------------------

        $(function () {                                                    //-------mouseenter 鼠标进入

            $("#div3").mouseenter(function () {

                $("#btn5").val(parseInt($("#btn5").val()) + 1)

            })

            //<!--仅仅有当鼠标进入【被选中】控件div3的时候才会触发mouseenter事件，当鼠标进入【被选中】控件的【子元素】的时候而没有离开被选中控件本身的时候【不会再次】触发-->

        });

        //********************************************************************************************************

        //<!--不论鼠标指针离开被选元素还是不论什么子元素，都会触发 mouseout 事件-->

        $(function () {                                                    //-------mouseout 鼠标离开

            $("#div4").mouseout(function () {

                $("#btn7").val(parseInt($("#btn7").val()) + 1)

            })

            //当鼠标离开的div4的时候就会触发mouseout事件，当鼠标进入div4的子控件btn7后。离开btn7就会再次触发mouseout事件。当鼠标从btn7进入btn8,后。离开btn8的时候也会再次触发mouseout事件。

        });

        //---------------------------------------------------------------------------------------------------------

        $(function () {                                                    //-------mouseleave 鼠标离开

            $("#div5").mouseleave(function () {

               $("#btn9").val(parseInt($("#btn9").val()) + 1)

            })

            //<!--仅仅有当鼠标离开【被选中】控件的时候才会触发mouseleave事件；当鼠标离开【被选中】的【子元素】而【没有离开被选中的控件】的时候【不会再次】触发-->

        });

        //==========================================================================================================

    </script>

版权声明：本文博主原创文章。博客，未经同意不得转载。

mouseover与mouseenter与mousemove差额mouseout与mouseleave差额的更多相关文章

  1. mouseover与mouseenter与mousemove的区别mouseout与mouseleave的区别

    <html> <head> <title></title> </head> <body> <p> 当鼠标进入div1 ...

  2. mouseout与mouseleave的区别

    1 mouseout:当鼠标指针从元素上移开时,发生 mouseout 事件.该事件大多数时候会与 mouseover 事件一起使用. 2 mouseout与 mouseleave 事件不同,不论鼠标 ...

  3. jQuery mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...

  4. mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseout ...

  5. 曾经跳过的坑----jQuery mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...

  6. JQ中mouseover和mouseenter的区别

    我最近也在学习JQuery,所以最近对JQ中的一些小问题进行总结,方便学习. 在对于刚开始学习JQ的初学者来说,mouseover事件和mouseenter事件总是傻傻分不清楚,毕竟刚开始学习的时候, ...

  7. 区别mouseover与mouseenter?

    区别mouseover与mouseenter? * mouseover: 在移入子元素时也会触发, 对应mouseout,进入子元素的时候,父元素显示离开状态 * mouseenter: 只在移入当前 ...

  8. jquery中mouseover和mouseenter的区别

    jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...

  9. mouseover与mouseenter区别

    学习笔记. mouseover:在鼠标移入元素本身或者子元素时都会触发事件,相当于有一个冒泡过程.而且在鼠标移入子元素中时,父元素会显示离开的状态:相应的,当鼠标从子元素移入父元素,子元素也会显示离开 ...

随机推荐

  1. Redis 安装与简单示例（转）

    本文转载自:http://www.cnblogs.com/kissdodog/p/3570984.html Redis的安装 Redis下载地址如下:https://github.com/dmajki ...

  2. 命令行參数选项处理：getopt()及getopt_long()函数使用

         在执行某个程序的时候,我们通常使用命令行參数来进行配置其行为.命令行选项和參数控制 UNIX 程序,告知它们怎样动作. 当 gcc的程序启动代码调用我们的入口函数 main(int argc ...

  3. RPC分布式处理

    RPC(远程过程调用)的应用 接触背景 因为工作上某项目的需要设计一种分布式处理耗时的运算,每个节点然后将运算结果返回给中心服务器,而最初未了解RPC这部分之前我的设计是在每一个RPC服务器上搭建一个 ...

  4. Python学习入门基础教程(learning Python)--2.3.1 Python传参函数设计

    本节主要讨论设计传递多个参数子函数的设计方法. 在2.3节里我们讨论了如何自己设计一个带参数的子函数的设计方法,现在我们研究一下如何传递两个及以上参数的设计方法. 函数为何要带参数呢?其实原因很简单, ...

  5. python之字符串的分割和拼接

    关于string的split 和 join 方法 对导入os模块进行os.path.splie()/os.path.join() 貌似是处理机制不一样,但是功能上一样. 1.string.split( ...

  6. Linux日志清除

    因为数据要求.经常需要抓住和筛选过滤数据,大概花了7 8个月.改变了机旁数据.重新开始,发现"No space left on device" 解决方法: 直接删除日志(简单粗暴) ...

  7. 【iOS】彩虹渐变色 的 Swift 实现

    首先很感谢大家的支持与关注.<Web Color 的 Swfit 实现>一文一经公布.訪问量迅速攀升,让本人受宠若惊. 为表达感激之情,今天早上把彩虹渐变也顺手实现了. 最新代码& ...

  8. C 和 C++ 的速度相差多少，你知道吗？

    有谁清楚这个事实吗 ? 网络游戏速度至关重要, 是游戏质量的唯一标准, 尤其是即时格斗, 相差几毫秒都会影响用户体验 ! 哪怕就是 5% 的效率损失,也是 差之毫厘,失之千里, 游戏的速度是程序语言天 ...

  9. 新书《iOS8 Swift编程指南》货架

    颐和园的新书出版. 链接:http://www.amazon.cn/dp/B00YOQSYAO 这本书从去年开始7可能开始写.今年1完成这个月的第一稿,经过多次修改,今天,最后的正式出版,欢迎大家指正 ...

  10. java Socket的怪异之处

    怪异之一: connect(SocketAddress endpoint):这个方法,尝试连接server端,如果连接不上,就抛出IOException异常.如果连接成功了,就继续执行下一步的代码. ...