mouseenter、mouseleave和mouseout、mouseover的区别

最新推荐文章于 2024-07-26 10:19:04 发布

#麻辣小龙虾#

最新推荐文章于 2024-07-26 10:19:04 发布

阅读量1.4k

点赞数

分类专栏： web前端 javascript

本文链接：https://blog.csdn.net/CodingNoob/article/details/74099262

版权

web前端同时被 2 个专栏收录

99 篇文章 2 订阅

订阅专栏

javascript

90 篇文章 1 订阅

订阅专栏

首先查看定义（引用《javascript高级程序设计》）

mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且
在光标移动到后代元素上不会触发。DOM2 级事件并没有定义这个事件，但DOM3 级事件将它
纳入了规范。IE、Firefox 9+和Opera 支持这个事件。

mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且
在光标移动到后代元素上不会触发。DOM2 级事件并没有定义这个事件，但DOM3 级事件将它
纳入了规范。IE、Firefox 9+和Opera 支持这个事件。

mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另
一个元素可能位于前一个元素的外部，也可能是这个元素的子元素。不能通过键盘触发这个事件。

mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触
发。不能通过键盘触发这个事件。

从定义上看，mouseenter、mouseleave这两个事件都不会冒泡，并且鼠标从父元素移入子元素时不会触发

mouseout、mouseover这两个事件则会冒泡，鼠标从父元素移入子元素时会触发

demo代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        label{display: inline-block;width:200px;height:40px;border:1px solid #ccc;}
        .ob{width:200px;background:#ccc;padding:10px;}
        .child{width:100px;height:100px;background:red;}
    </style>
</head>
<body>
    <div class="ob">
        A
       <div class="child">
        B
        </div>
    </div>
    <script>

        var ob = document.querySelector(".ob");
        var child = ob.querySelector(".child");
        console.log(ob.clientHeight);

        ob.onmouseenter = function(){
            console.log("onmouseenter触发元素移入事件");

        }

        ob.onmouseleave = function(){
            console.log("onmouseleave触发元素移出事件");

        }


    </script>
</body>
</html>

当鼠标在外部div移入移出时会触发相应的事件，但是当鼠标从父元素移入子元素的时候并不会触发相应的事件，如图所示：
这里写图片描述

demo02代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        label{display: inline-block;width:200px;height:40px;border:1px solid #ccc;}
        .ob{width:200px;background:#ccc;padding:10px;}
        .child{width:100px;height:100px;background:red;}
    </style>
</head>
<body>
    <div class="ob">
        A
       <div class="child">
        B
        </div>
    </div>
    <script>

        var ob = document.querySelector(".ob");
        var child = ob.querySelector(".child");




        ob.onmouseover = function(){
            console.log("onmouseover触发元素移入事件")

        }

        ob.onmouseout = function(){
            console.log("onmouseout触发元素移出事件");
            console.log("------");
        }
    </script>
</body>
</html>

这里写图片描述

结果分析，
上图结果你会发现，当鼠标从外部body移入到外部元素A的时候会先触发A元素绑定的鼠标移入onmouseover 事件，接着当鼠标从A移入子元素B的时候又会发现触发了A元素的鼠标移出事件onmouseout。

为什么呢？从上面的定义看，onmouseover 和 onmouseout两个事件都从父元素移入子元素的时候都会触发，所以鼠标从A移入子元素B那也就说明A元素已经移出了，就触发了A元素的onmouseout事件，你可能会很奇怪，为什么A移入B也会触发A元素的onmouseover 事件，原因同理，鼠标从A移入子元素B不但触发了A元素的onmouseout事件同时也会触发A的onmouseover事件（从定义上看），所以就得到了上述结果。

如果鼠标从B元素移出来，到A元素，则会产生以下结果，
首先会触发A元素的onmouseout移出事件，因为子元素B移出了会触发A元素的onmouseout移出事件，然后再触发A事件的onmouseover 移入事件。
结果如下图所示：
这里写图片描述