mouseenter和mouseover的区别

mouseenter鼠标事件

• 当鼠标移动到元素上时就会触发mouseenter事件
• 类似mouseover,两者区别是
• mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只会经过自身盒子触发。
• 原因是：mouseenter不会冒泡
• 跟mouseenter搭配的鼠标离开事件 mouseleave同样不会冒泡

<div class="father">
    <div class="son"></div>
</div>
<script>
    var father = document.querySelector('.father');
    var son = document.querySelector('.son');
    father. addEventListener('mouseover', function() {
        console.log(11);//经过父盒子会打印 11，经过子盒子也会打印 11
    })
</script>