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. 我的第一个 Mono for Android 应用

    创建 Mono for Android 应用 打开 MonoDevelop , 选择新建解决方案, 左边的分类选择 "Mono for Android" , 右边选择 " ...

  2. COJ977 WZJ的数据结构（负二十三）

    试题描述 输入一个字符串S,输出S的最长连续回文子串长度. 输入 输入一个字符串S. 输出 输出S的最长连续回文子串长度 输入示例 abacbbc 输出示例 4 其他说明 1<=|S|<= ...

  3. SQLyog 配置SQL Assitant

    在上一篇博文“MySQL配置SQL Assistant提示”中,我介绍了配置SQL Assitant自带的SQL Editor连接MySQL数据库的配置,但是试用两天后发现,SQL Editor不支持 ...

  4. javamail发送邮件的简单实例

    今天学习了一下JavaMail,javamail发送邮件确实是一个比较麻烦的问题.为了以后使用方便,自己写了段代码,打成jar包,以方便以后使用.呵呵 以下三段代码是我的全部代码,朋友们如果想用,直接 ...

  5. jQuery.Validate验证库详解

    一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...

  6. 【C语言】16-预处理指令2-条件编译

    条件编译的概念 在很多情况下,我们希望程序的其中一部分代码只有在满足一定条件时才进行编译,否则不参与编译(只有参与编译的代码最终才能被执行),这就是条件编译. 一.基本用法 1 #if 条件1 2 . ...

  7. APP UI设计相关的一些链接

    安卓app设计规范整理和Android APP设计篇 http://www.25xt.com/appdesign/6536.html APP UI面试题:iOS和安卓的ui设计有什么区别 http:/ ...

  8. Careercup | Chapter 7

    7.4 Write methods to implement the multiply, subtract, and divide operations for integers. Use only ...

  9. 使用LTT升级HP磁带机的固件程序

    下载后将软件包解压 解压后,进入该文件夹可以看到固件程序     将所有固件程序拷贝至LTT软件安装目录下的firmware文件夹中 C:\Program Files\HP StorageWorks ...

  10. 5. Configure the Image Service

    Controller Node: 1. sudo apt-get install glance python-glanceclient   2. sudo vi /etc/glance/glance- ...