l论事件onmouseover 和 onmouseenter；同类比较onmouseout 和 onmouseleave;

使用onmouseover时，鼠标除了被设置事件的元素，还会触发其子元素； 而onmouseenter只会触发被设置了事件的元素，子元素不受影响。

支持度：mouseenter,mouseleavei  IE8+的浏览器支持，safari 5不支持

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>mouseover 和 mouseenter的区别</title>

     <style>

         body{

             padding: 0;

             margin: 0; }

         #box1,

         #box2{

             width: 300px;

             height: 100px;

             margin-top: 100px;

             padding-top: 50px;

             background: #f00; }

         #box1 p,

         #box2 p{

             width: 70%;

             height: 50px;

             line-height: 50px;

             text-align: center;

             background: #ccc; }

     </style>

     <script>

         window.onload = function(){

             var box1 = document.getElementById("box1");

             var box2 = document.getElementById("box2");

             var num1 = document.getElementById("num1");

             var num2 = document.getElementById("num2");

             box1.onmouseover = function(){

                 num1.innerHTML++;

             }

             box2.onmouseenter = function(){

                 num2.innerHTML++;

             }

         }

     </script>

 </head>

 <body>

     <div id="box1">

         <p>事件mouseover: <span id="num1">1</span></p>

     </div>

     <div id="box2">

         <p>事件mouseenter: <span id="num2">1</span></p>

     </div>

 </body>

 </html>

The different of mouseover and mouseenter的更多相关文章

  1. jquery的hover mouseover mouseout mouseenter mouseleave的区别

    jquery的hover mouseover mouseout mouseenter mouseleave的区别 1.mouseover mouseout mouseover - 鼠标指针经过任何子元 ...

  2. mouseover和mouseenter的区别

    mouseover和mouseenter都是鼠标事件. mouseover事件,当鼠标穿过被选元素的时候,若此元素有子元素,子元素也会被触发此事件.即是使用mouseover事件,会多次触发此元素. ...

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

    1.前言 今天下午参加一个面试,对方问我写不写博客,这时候才猛然意识到好久没写东西了.最近一直在外边实习,每天有很多经历和挑战,但是却没有及时地记录下来,这一点必须得批评自己,以后得经常把自己遇到的问 ...

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

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

  5. 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别

    轮播中大多会选择mouseover和mouseout  这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...

  6. 区别mouseover与mouseenter?

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

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

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

  8. 你可能不知道的mouseover/mouseout mouseenter/mouseleave

    mouseover与mouseenter 1. 触发时机 mouseover在被监听的节点与子节点上都会触发 mouseenter只在被监听的节点上触发 本质上是因为mouseenter不能冒泡 2. ...

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

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

随机推荐

  1. Spring MVC视图解析器

    Spring MVC提供的视图解析器使用ViewResolver进行视图解析,实现浏览器中渲染模型.ViewResolver能够解析JSP.Velocity模板.FreeMarker模板和XSLT等多 ...

  2. 理解＃define offsetof(struct_t,member) ((int)&((struct_t *)0)->member)

    #define offsetof(struct_t,member) ((int)&((struct_t *)0)->member) 这个东西很多人应该知道: offsetof是用来判断结 ...

  3. Win7下Doxygen配置与使用

    1.  下载与安装 1.1 下载 Doxygen官方安装程序及其手册下载地址,目前使用版本为1.8.8. 安装程序:http://www.stack.nl/~dimitri/doxygen/downl ...

  4. C#的四种Timer介绍

    一.Timer的几个类别 1.System.Threading.Timer 2.System.Timers.Timer 3.System.Windows.Forms.Timer 4.System.Wi ...

  5. 关于ES3、ES5、ES6以及ES7所有数组的方法(api)的总结

    起因:工作用经常用到操作数组的方法,这里进行一下总结,我尽量以简洁的语言概括每个方法(api)的作用.如果您想快速定位,可以Control+F 然后搜相应的方法即可定位 :) ES3的数组方法 joi ...

  6. Tomcat内部结构及工作原理学习

    Tomcat原本是Servlet/JSP的一个调试工具,后来才发展为一个Servlet/JSP的容器. Tomcat作为Servlet容器,负责处理客户请求,把请求传送给Servlet并把结果返回给客 ...

  7. hadoop2.7.3配置文件中过时的属性

    过时的属性:Deprecated Properties 该列表保存于:hadoop-2.7.3-src\hadoop-common-project\hadoop-common\src\site\mar ...

  8. Java学习路线图，专为新手定制的Java学习计划建议

    怎么学习Java,这是很多新手经常会问我的问题,现在我简单描述下一个Java初学者到就业要学到的一些东西:    首先要明白Java体系设计到得三个方面:J2SE,J2EE,J2ME(KJAVA).J ...

  9. 浏览器Range,Selection等选中文本对象

    Range对象 Range 对象表示文档的连续范围区域,如用户在浏览器窗口中用鼠标拖动选中的区域. 最常见的Range是用户文本选择范围(user text selection).当用户选择了页面上的 ...

  10. mybatis+oracle添加一条数据并返回所添加数据的主键问题

    最近做mybatis+oracle项目的时候解决添加一条数据并返回所添加数据的主键问题 controller层 @RequestMapping("/addplan") public ...