你真的知道onmouseenter与onmouseover的区别吗？？？

前言：

相信很多人跟我一样，在入门js的时候会"滥用"onmouseenter与onmouseover,觉得二者好像没有什么区别，所以使用的时候就很随意，用谁完全看心情，二者事件都是在鼠标移动到元素上时触发~其实二者的是有些许差别的

区别：

onmouseenter 事件不支持冒泡

还有一个小区别就是 onmouseenter 与 onmouseleave 搭配使用， onmouseover 与 onmouseout 搭配使用

什么是事件冒泡？

事件冒泡： 多个元素嵌套，有层次关系，这些元素都注册了相同的事件，如果里面的元素的事件触发了，外面的元素的该事件自动的触发了。说的通俗点，比如说，父元素添加了onclick事件，当子元素发生onclick事件时，父元素的onclick事件也会触发。

做开发的宝宝们都知道，事件冒泡在很多时候对我们都有坏的影响，那如何阻止事件冒泡呢？有两个方法（我知道的）：

• window.event.cancelBubble=true; IE特有，谷歌也支持，火狐不支持
• e.stopPropagation(); 只有IE不支持（e 事件处理参数对象）

例子：

<style>
  div {
      width: 100px;
      height: 100px;
      border: 1px solid #000;
      margin: 50px;
      float: left;
      padding: 50px;
      text-align: center;
      background-color: lightslategray;
  }

  p {
      background-color: lightgoldenrodyellow;
  }
</style>

<div id="box1">
    <p>onmouseenter: <br> <span id="enter">鼠标过来!</span></p>
</div>

<div id="box2">
    <p>onmouseover: <br> <span id="over">鼠标过来!</span></p>
</div>

<script>
    var x = 0;
    var y = 0;
    document.getElementById('box1').onmouseenter=function(){
      document.getElementById("enter").innerHTML = ++x;
    }
    
    document.getElementById('box2').onmouseover=function(){
      document.getElementById("over").innerHTML = ++y;
    }
</script>
复制代码

结果：会发现，当把鼠标放到span处，onmouseenter下面的数字不会加1，而onmouseover会，可见onmouseover支持事件冒泡。

转载于:https://juejin.im/post/5cd51f11f265da03a33c5229