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. BZOJ 1001 & SPFA

    1001: [BeiJing2006]狼抓兔子 Time Limit: 15 Sec  Memory Limit: 162 MB Description 现在小朋友们最喜欢的"喜羊羊与灰太狼 ...

  2. null VS undefined

    null VS undefined “null与undefined的区别?” 以前去淘宝面试的时候被问过这个问题,当时只是粗略的按照犀牛书上的答案讲了下,但具体的并没有深入去了解. 后来有机会去问问身 ...

  3. Bestcoder Round# 80

    [1003 Sequence] 指数循环节,注意a mod p = 0的情况.此时你的循环节如果返回0,这时你会输出1,而实际上应该是0 #include <algorithm> #inc ...

  4. BZOJ3994: [SDOI2015]约数个数和

    Description  设d(x)为x的约数个数,给定N.M,求     Input 输入文件包含多组测试数据. 第一行,一个整数T,表示测试数据的组数. 接下来的T行,每行两个整数N.M.   O ...

  5. javascript第二弹——函数

    什么是函数 函数是一块javascript代码,被定义一次,就可以执行和调用多次:函数也是js对象,所以也可以像对象那样操作和传递:所以我们也把函数称之为函数对象: 创建函数的几种方法 一.函数声明 ...

  6. 遍历josn的三种方式

    第一种:使用for循环 js代码: function CyclingJson1() { var testJson = '[{ "name": "小强", &qu ...

  7. [ZT] Vim快捷键分类

    一. 移动:    h,j,k,l: 左,下,上,右.    w: 下一个词的词首.    e:下一个词的词尾.    b:上一个词的词首.    <>: v 模式选中后进行缩进.二. 跳 ...

  8. 5. Configure the Image Service

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

  9. Powershell变量的类型

    Powershell 默认支持的.NET类型如下:   [order], [pscustomobject], [array], [bool], [byte], [char], [datetime], ...

  10. DX11.2 Tiled Resource Pool

    Nvidia white paper : https://developer.nvidia.com/content/taking-advantage-directx112-tiled-resource ...