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 的编程式事务管理及声明式事务管理

    开始之前 关于本教程 本教程将深入讲解 Spring 简单而强大的事务管理功能,包括编程式事务和声明式事务.通过对本教程的学习,您将能够理解 Spring 事务管理的本质,并灵活运用之. 先决条件 本 ...

  2. final finally finalize

    final  //如果不是final 的话,我可以在checkInt方法内部把i的值改变(有意或无意的,       //虽然不会改变实际调用处的值),特别是无意的,可能会引用一些难以发现的BUG   ...

  3. Codeforces Round #389 (Div. 2, Rated, Based on Technocup 2017 - Elimination Round 3) D. Santa Claus and a Palindrome STL

    D. Santa Claus and a Palindrome time limit per test 2 seconds memory limit per test 256 megabytes in ...

  4. Cocos2d-x 核心概念 - 游戏循环与调度

    每一个游戏程序都有一个循环在不断运行,他是由导演对象来管理和维护. 如果需要场景中的精灵运动起来,我们可以在循环中使用定时器(Scheduler)对精灵等对象的运行进行调度 因为Node中封装了 Sc ...

  5. stopPropagation, preventDefault 和 return false 的区别

    因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagati ...

  6. JSPatch学习笔记

    本文参考JSPatch wiki :https://github.com/bang590/JSPatch/wiki 1.概念 JSPatch是一个轻量的JS引擎,能够使用JavaScript语言来调用 ...

  7. JSP隐藏过长字段

    <div class="objDiv" title="${fof.fundName }">                        <c ...

  8. `UnityEditor.EditorUtility' does not contain a definition for `GetMiniThumbnail'

    I got the following errors with Untiy 4.0f7error CS0117: `UnityEditor.EditorUtility' does not contai ...

  9. java/Android 接口调用的几种写法

    虽然Handler用的地方比较普遍,但是接口也有他的独特之处,比较直观,然后降低了耦合性 如有一接口,需要将数据传给使用的activity中,接口如下 public interface PushVal ...

  10. ios第二天{函数}

    ////  main.m//  DAY3-1.6作业:工程敲4遍/*  作业:限时代码3分钟     提示用户从键盘输入一个整数(100以内) .如果输入的数,不是7的倍数,且不含7(个位和十位都不含 ...