mouseenter和mouseleave与mouseover和mouseout的区别

mouseover() 与 mouseenter() 之间的不同(先执行mouseover后mouseenter) mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 。 mouseenter 事件只在鼠标移动到选取的元素上时触发。

mouseover/mouseout事件支持冒泡,绑定的事件会冒泡到子标签上。 mouseenter/mouseleave事件则只针对所绑定的标签,不会冒泡到子标签上。

mouseover可以看到进入父集元素,进入到子集时、离开子集进入父级,一共三次

而mouseout只有进父级时一次

mouseleave 与 mouseout 的不同 mouseout可以看到离开父集进入子集,出子集元素,出父级元素一共三次 而mouseout只有出父级时一次

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
 
    <body>
        <div class="box">
            <div class="sonbox"></div>
        </div>
    </body>
    <script type="text/javascript">
        var box = document.getElementsByClassName("box")[0];  
        box.addEventListener("mouseenter", function() {      
            console.log("MouseEnter!");    
        });    
        box.addEventListener("mouseover", function() {      
            console.log("MouseOver!");    
        });    
        box.addEventListener("mouseout", function() {      
            console.log("MouseOut!");     
        });    
        box.addEventListener("mouseleave", function() {      
            console.log("MouseLeave!");    
        });
    </script>
    <style>
        div {
            margin: 0 auto;
        }
        
        .box {
            box-sizing: border-box;
            padding: 30px 0;
            width: 300px;
            border: 1px solid red;
        }
        
        .sonbox {
            width: 150px;
            height: 150px;
            background-color: pink;
        }
    </style>
 
</html>

原文链接