onmouseenter与mouseover的区别

红豌豆

于 2022-03-04 23:24:09 发布

阅读量235

点赞数

分类专栏：前端文章标签： javascript 前端 css3

本文链接：https://blog.youkuaiyun.com/qq_64353584/article/details/123287369

版权

前端专栏收录该内容

36 篇文章

订阅专栏

本文探讨了JavaScript中mouseenter和mouseover两个事件的区别。当使用onmouseover时，事件会在子元素上触发并冒泡到父元素，而onmouseenter事件则不会触发事件冒泡，仅在进入指定元素时触发。了解这两个事件的不同对于精确控制交互行为至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    // mouseenter  和 mouseover的区别
    var box1 = document.getElementById('box1');
    var i = 0;
    // 触发子元素的mouseover，会冒泡到父元素上
    // box1.onmouseover = function () {
    //   i++;
    //   console.log(i);
    // }
    // 
    // 此事件不触发事件冒泡
    box1.onmouseenter = function () {
      i++;
      console.log(i);
    }
  </script>
  //两种事件用法可以用在不同的事件上