0193 mouseenter 和mouseover的区别

  • 当鼠标移动到元素上时就会触发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');

        // 鼠标经过son时,son没有绑定鼠标经过事件,就会往上冒泡,而father绑定了鼠标经过事件,就会触发事件
        father.addEventListener('mouseenter', function() {
            console.log(11);
        })
    </script>

posted on 2020-01-13 16:08  冲啊!  阅读(174)  评论(0编辑  收藏  举报

导航