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. android sdk 安装排错

    如果你遇到了消息为“Failed to fetch URL…” 的错误提示,那么你需要将HTTPS方式改为HTTP方式,方法如下: 碰到这样错误,请按下边的操作. 1)在菜单选择Tools—Optio ...

  2. PNG无损压缩工具Optipng【备忘】

    Optipng 是专门的 PNG 图像优化工具. 支持WINODWS.LINUX 地址:http://optipng.sourceforge.net/ 另:jpegoptim 优化 jpeg 图片 地 ...

  3. 【BZOJ】3669: [Noi2014]魔法森林（lct+特殊的技巧）

    http://www.lydsy.com/JudgeOnline/problem.php?id=3669 首先看到题目应该可以得到我们要最小化 min{ max{a(u, v)} + max{b(u, ...

  4. gdb使用笔记

    相关编译选项: 1．-g 开启gdb 2．-o0,o2  o0表示不优化, 3． -funsigned-char -fdata-sections 会使compiler为每个function和data ...

  5. Xampp 添加 SSL

    我的 XAMPP 没有找到这句话 ,直接添加 extension=php_openssl.dll  大概988行另外,需要配置 httpd-ssl.conf 文件(*\xampp\apache\con ...

  6. GC-垃圾回收

    代:0代,1代,2代: 所谓第几代,指经历过GC回收的次数. 回收算法: 1.确认需要检查的代. 在分配新对象时, 如果第0代已满,则进行检查:如果第1代已满,则进行检查:第2代同理: 如第0代没有足 ...

  7. Frenetic Python实验(一)

    Follow: Github-Frenetic 准备: 所有的实验,第一步都需要开启控制器,命令: $ frenetic http-controller --verbosity debug 每一个实验 ...

  8. 获取在attr.xml中声明的主题样式

    在换肤时,先在attr.xml中定义Resource的属性名,再到stytle中,根据不同的主题,给属性赋值. 在布局文件中可直接以  android:background="?attr/a ...

  9. spotlight监控工具使用

    利用spotlight工具可以监控如下系统:        1.Spotlight on Unix 监控Linux服务器 1)安装 Spotlight on Unix 2)配置spotlight登陆用 ...

  10. hdf第二周,每天加班,周末加班,周日健身

    ----------------------------------------------------------------------------- 受到挫折,写一些简单的练习,增加成就感 放大 ...