实例解析mouseover,mouseout与mouseenter,mouseleave之间的区别

前言

我们都知道js提供了鼠标事件,而鼠标事件中包含了两对事件,即mouseover和mouseout以及mouseenter和mouseleave这两对事件,如果只是单纯的读红宝书上的文字可能体会不到他们的差别,现在我们就用实例来证明一下这个两组事件的差别。

定义

mouseenter

 在鼠标光标从元素外部首次移动到元素范围之内时触发,这个事件不冒泡。

mouseleave

 在位于元素上方的鼠标光标移动到元素范围之外时触发,这个事件不冒泡。

mouseover

 在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内时触发。

mouseout

 在鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部,也可能是该元素的子元素。

实例

 先放上整段代码,可以参考一下:

<body>
    <div id="parentDiv" style="background-color:aquamarine;width:200px;height:200px;">父元素
        <div id="childDiv" style="background-color:pink;width:100px;height:100px;margin: 0 auto;">子元素</div>
    </div>

    <p></p>
    <p></p>
    <p></p>
    <p></p>

    <script>
        //测试鼠标点击事件
        let parentDiv = document.getElementById('parentDiv')

        let mouseenterCount = 0;
        let mouseleaveCount = 0; 
        let mouseoverCount = 0; 
        let mouseoutCount = 0; 

        parentDiv.addEventListener('mouseenter',function(){
            let showText = document.getElementsByTagName('p')[0];
            mouseenterCount++;
            showText.innerText = "鼠标enter的次数为" + mouseenterCount;
        })

        parentDiv.addEventListener('mouseleave',function(){
            let showText = document.getElementsByTagName('p')[1];
            mouseleaveCount++;
            showText.innerText = "鼠标leave的次数为" + mouseleaveCount;
        })

        parentDiv.addEventListener('mouseover',function(){
            let showText = document.getElementsByTagName('p')[2];
            mouseoverCount++;
            showText.innerText = "鼠标over的次数为" + mouseoverCount;
        })

        parentDiv.addEventListener('mouseout',function(){
            let showText = document.getElementsByTagName('p')[3];
            mouseoutCount++;
            showText.innerText = "鼠标out的次数为" + mouseoutCount;
        })

    </script>
</body>

 操作的动图是这样的:(括号中数字是表示触发的次数)

  • 第一步:鼠标进入父元素,同时触发mouseenter(1)和mouseover(1
  • 第二步:鼠标进入子元素,同时触发mouseover(2)和mouseout(1
  • 第三步:鼠标离开子元素,同时触发mouseout(2)和mouseover(3
  • 第四步:鼠标离开父元素,同时触发mouseout(3)和mouseleave(1

总结

 根据上面的操作,我们可以总结出以下结论:

  • mouseenter和mouseleave只有离开该元素时才会触发,如果有子元素的话,鼠标移入子元素,还算是在该元素中,所以不会触发;
  • mouseover和mouseout是只要有进入和离开就会出触发,无论是从父元素到子元素还是子元素到父元素,或者是只对父元素进行操作(换句话说,会触发mouseenter和mouseleave的时候一定会触发mouseover和mouseout)
原文链接:segmentfault.com

上一篇:http请求 header里General Response Request 里面参数的含义
下一篇:小程序通用转译框架娜娜奇1.0.4发布

相关推荐

官方社区

扫码加入 JavaScript 社区