mouseenter事件只会触发一次，触发对象是注册对象或者注册对象的子元素

mouseover事件可以触发多次，触发对象是注册对象或者注册对象的子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
    <p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
    <div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
        <h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
    </div>
    <div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
           <h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
    </div>
    <script>
        var x = 0,y = 0;
        var div1 = document.getElementsByClassName("over")[0];
        div1.addEventListener("mouseover",function(){
            var span = this.getElementsByTagName("span")[0]
            span.innerText = (x +=1);
            span.style.cssText = "border:2px red solid;";
        },false);

        var div2 = document.getElementsByClassName("enter")[0];
        div2.addEventListener("mouseenter",function(){
            var span = this.getElementsByTagName("span")[0]
            span.innerText = (y +=1);
            span.style.cssText = "border:2px red solid;";
        },false);
    </script>
</body>
</html>

JS之mouseover和mouseenter的更多相关文章

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

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

  2. jquery中mouseover和mouseenter的区别

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

  3. 事件处理& 事件委托& 区别mouseover与mouseenter

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. jQuery里的mouseover与mouseenter事件类型区别

    JQ里面有mouseover和mouseenter  2个事件类型干着差不多的活,用不好经常出现些小问题. 今天我解释一下原理: 事件类型翻译: mouseover 鼠标移上 mouseenter 鼠 ...

  5. The different of mouseover and mouseenter

    l论事件onmouseover 和 onmouseenter:同类比较onmouseout 和 onmouseleave; 使用onmouseover时,鼠标除了被设置事件的元素,还会触发其子元素: ...

  6. mouseover和mouseenter的区别

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

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

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

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

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

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

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

随机推荐

  1. [Cocos2d-x For WP8]Transition 场景切换

    在游戏中通常会打完了一关之后就会从当前的场景转换到另外一关的场景了,在Cocos2d-x中是由CCScene类表示一个场景.那么场景(CCScene)是为游戏中的精灵(CCSprite)提供了舞台,场 ...

  2. winform学习2-datagridview数据绑定

    1.datagridview.clearSelection()清除默认的选中项 2.列数据显示,首先列必须是显示状态, 3.布局-单元格内文字内容居中显示,示例:外观-defaultCellStyle ...

  3. 封装同步的UIActionSheet

    封装同步的UIActionSheet 发问题 做 iOS 开发的同学想必都用过 UIActionSheet.UIActionSheet 可以弹出一个选择列表,让用户选择列表中的某一项操作.使用 UIA ...

  4. 【C语言】12-指向一维数组元素的指针

    一.用指针指向一维数组的元素 1 // 定义一个int类型的数组 2 int a[2]; 3 4 // 定义一个int类型的指针 5 int *p; 6 7 // 让指针指向数组的第0个元素 8 p ...

  5. C# - Dbhelp

    dbhelp.cs using System; using System.Data; using System.Data.Common; using System.Configuration; pub ...

  6. mysql时该如何估算内存的消耗，公式如何计算？

    经常有人问配置mysql时该如何估算内存的消耗.那么该使用什么公式来计算呢? 关心内存怎么使用的原因是可以理解的.如果配置mysql服务器使用太少的内存会导致性能不是最优的;如果配置了太多的内存则会导 ...

  7. [转]Visual Studio 实用扩展推荐

    本文转自 http://www.cnblogs.com/stg609/p/3726898.html Visual Studio 拥有非常不错的可扩展性,在之前的文章中,我也给大家示范了如何进行编辑器的 ...

  8. linux下IPTABLES配置

    如果你的IPTABLES基础知识还不了解,建议先去看看. 开始配置 我们来配置一个filter表的防火墙. (1)查看本机关于IPTABLES的设置情况 [root@tp ~]# iptables - ...

  9. 【转】C#文件操作大全

    文件与文件夹操作主要用到以下几个类: 1.File类: 提供用于创建.复制.删除.移动和打开文件的静态方法,并协助创建 FileStream 对象. msdn:http://msdn.microsof ...

  10. PHP 错误与异常 笔记与总结（8）自定义错误处理函数 set_error_handler()

    通过 Set_error_handler() 函数设置用户自定义的错误处理函数. 步骤: ① 创建错误处理函数 ② 设置不同级别调用函数 ③ Set_error_handler() 函数制定接管错误处 ...