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. easyui-window 关闭事件，只要关闭窗口就会触发

    $(function () {            $('#windowsMSG').window({                onBeforeClose: function () { //当 ...

  2. Cheatsheet: 2016 10.01 ~ 10.31

    Docker Introduction to Docker Monitoring Database MongoDB: The Good, The Bad, and The Ugly Web 4 Key ...

  3. [Python]实现简单决策树

    基本思路: 通过香农熵来决定每一层使用哪一种标签做分类,分类后,通过多数表决法来决定该层两个节点的类别.每次消耗一个标签,所以一共需要递归"标签个数"层. # -*- coding ...

  4. jquery总结06-动画事件03-淡入淡出效果

    .fadeout()淡出 .fadein()淡入 .fadeTaggle()淡入淡出切换 .fadeTo()淡入设定透明度 淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性,但 ...

  5. JavaScript中的数组遍历forEach()与map()方法以及兼容写法

    原理: 高级浏览器支持forEach方法 语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: forEach:用来遍历数组中的每一项:这个方法执行是 ...

  6. springMvc 使用ajax上传文件，返回获取的文件数据 附Struts2文件上传

    总结一下 springMvc使用ajax文件上传 首先说明一下,以下代码所解决的问题 :前端通过input file 标签获取文件,通过ajax与后端交互,后端获取文件,读取excel文件内容,返回e ...

  7. select 和 input 的不可编辑，input隐藏

    select 没有readOnly属性 在jsp中 <select  id="a" name="a" disabled="disabled&qu ...

  8. PBOC金融IC卡，卡片与终端交互的13个步骤，简介-第二组(转)

    四:脱机数据认证-可选终端进行脱机数据认证来,认证卡片.记住:对于某个事情,终端与卡片谁单独也说了不算,要二者都能干才能干. 终端依据卡片(AIP)和终端(终端性能)的支持情况,决定是否使用及使用哪种 ...

  9. 121. Best Time to Buy and Sell Stock

    Say you have an array for which the ith element is the price of a given stock on day i. If you were ...

  10. h5

    1. 在iPhone 手机上默认值是(电话号码显示为拨号的超链接): <meta name="format-detection" content="telephon ...