鼠标移出移出事件的区别

在JS中，有两组事件的功能基本上是一样的，即鼠标的移入和移出事件。分别是mouseenter、mouseleave和mouseover、mouseout。

mouseenter、mouseleave

enter表示鼠标移入触发的事件，leave表示鼠标移出触发的事件。

当鼠标移入粉色盒子时,触发事件函数,这就是鼠标的移入事件。

const div = document.querySelector('div')
    div.addEventListener('mouseenter', function () {
      console.log('移入事件触发');
   })

 当鼠标移出粉色盒子，触发事件函数，这就是鼠标移出事件。

 div.addEventListener('mouseleave', function () {
   console.log('移出事件触发');
  })

这一组鼠标移入移出事件，是没有事件冒泡机制的，比如：

可以看到，鼠标移入紫色盒子，触发了相应的事件，移出时也触发了相应的事件。但是紫色的盒子作为子容器，并没有将事件冒泡给父元素。下面是一些关键的代码：

 div.addEventListener('mouseenter', function () {
    console.log('移入事件触发');
 })

 div.addEventListener('mouseleave', function () {
     console.log('移出事件触发');
 })

 inner.addEventListener('mouseenter', function () {
     console.log('移入事件触发111');
 })

 inner.addEventListener('mouseleave', function () {
     console.log('移出事件触发222');
 })

mouseover、mouseout

当我们把上面的事件改为新的这一组之后，效果就有所不同了：

当鼠标移入了紫色盒子之后，它一共的触发了三个事件。

当鼠标从紫色盒子上移出也是同理：

 第一个事件就是自身的移出事件，第二个则是冒泡父元素上的移出事件，第三个则是移入（从紫色盒子重新回到了粉色盒子）事件。

综上所述，两组事件的区别在于事件冒泡。具体怎么选择还得看需求。