mouseover事件和mouseenter事件以及mouseleave事件和mouseout事件的区别

mouseover事件，mouseenter事件，mouseout事件，mouseleave事件详解以及实例演示

.慢慢亦漫漫

13774人浏览 · 2022-02-15 16:24:56

.慢慢亦漫漫 · 2022-02-15 16:24:56 发布

1.mouseover事件与mouseenter事件

mouseover事件：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
mouseenter事件：只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

2.mouseout事件与mouseleave事件

mouseout事件：不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
mouseleave事件：只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

3.实例演示四个事件

<body>
    <div id="bigdiv" style="width: 400px;height: 400px;background-color: aqua;padding-top: 100px;
    padding-left: 100px;box-sizing: border-box;margin: auto;">
        <div id="smalldiv" style="width: 200px;height: 200px;background-color: rgb(18, 218, 158);">

        </div>
    </div>
</body>
<script>
        let bigdiv=document.querySelector('#bigdiv')
        bigdiv.addEventListener('mouseenter',function(){
            console.log('mouseenter')
        },false)
       
        bigdiv.addEventListener('mouseover',function(){
            console.log('mouseover')
        },false)
     
        bigdiv.addEventListener('mouseleave',function(){
            console.log('mouseleave')
        },false)

        bigdiv.addEventListener('mouseout',function(){
            console.log('mouseout')
        },false)
    </script>

上述代码设置了两个div，给大div绑定了四个事件，现在我们用鼠标依次穿过两个div（如下图），看一下控制台输出结果

控制台输出结果
仔细观察上图以及输出结果：在鼠标进入bigdiv时，也就是在1的位置时，发生了mouseover和mouseenter事件，并且over比enter先触发；在鼠标进入samlldiv时，也就是在2的位置时，触发了mouseout和mouseover，这里触发out是因为离开了父元素bigdiv进入子元素smalldiv触发的，mouseover事件在子元素也会触发，所以此时也触发了mouseover事件；