JavaScript-229：mouseover和mouseenter区别

mouseover 鼠标经过自身盒子会触发 经过子盒子还会触发
mouseenter 只有经过自身盒子触发 因为不会冒泡
mouseleave 鼠标离开触发 同样不会冒泡

结构

   <div class="father">
       <div class="son"></div>
   </div>

CSS

        .father {
    
    
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
        }

        .son {
    
    
            width: 100px;
            height: 100px;
            background-color: red;
        }

js

        var father = document.querySelector('.father');
        var son = document.querySelector('.son')
        // father.addEventListener('mouseover', function () {
    
    
        //     console.log(11);

        // })
        // father.addEventListener('mouseenter', function () {
    
    
        //     console.log(11);

        // })
        father.addEventListener('mouseleave', function () {
    
    
            console.log(11);

        })