深入了解JS鼠标悬停事件

一、悬停事件的概述

鼠标悬停事件是指当鼠标指针进入或离开页面上一个元素时，会触发相应的事件，通常用于改变元素的展示效果，以提高页面的用户体验。JS中的鼠标悬停事件包括mouseenter、mouseleave、mouseover和mouseout四种，这四种事件有什么区别呢？

二、四种悬停事件的区别

① mouseenter和mouseleave事件是不会冒泡的，只有鼠标指针在两个元素之间移动时，才会触发mouseleave和mouseenter事件；

② mouseover和mouseout事件是会冒泡的，当鼠标指针进入某元素的子元素中时，会触发该子元素的mouseover事件，而在离开该子元素时，则会触发mouseout事件；

三、如何使用悬停事件

如果我们需要在鼠标指针悬停某元素时，改变其显示效果，那么可以通过修改元素的CSS样式属性实现。下面是一个例子：


const button = document.querySelector('button');
button.addEventListener('mouseenter', function() {
  this.style.backgroundColor = 'red';
});
button.addEventListener('mouseleave', function() {
  this.style.backgroundColor = 'blue';
});

上述代码中，首先获取了一个button元素，并为其添加了mouseenter和mouseleave事件的监听器。当鼠标指针进入button元素时，会把其背景色设置为红色，离开时则恢复为蓝色。

四、悬停事件的应用场景

鼠标悬停事件可以应用于很多地方，比如通过对菜单栏的悬停事件监听，可以实现菜单栏自动弹出子菜单的效果；对于网页导航栏中的图标，可以使用悬停事件改变其颜色或动画效果等。

除此之外，鼠标悬停事件还可以与其他事件一起使用，比如点击事件，通过判断鼠标是否悬停在某个区域内再执行相应的操作。

五、注意事项

鼠标悬停事件虽然方便易用，但是需要注意一些细节问题。比如，在使用mouseenter和mouseleave事件时，如果在元素内部添加了子元素，可能会出现问题；对于mouseenter和mouseover事件，如果你希望所有的子元素都能被检测到，那么可以使用mouseenter和mouseover事件配合使用。


const parentDiv = document.querySelector('.parentDiv');
parentDiv.addEventListener('mouseenter', function() {
  this.style.backgroundColor = 'lightgrey';
});
parentDiv.addEventListener('mouseover', function() {
  this.style.color = 'white';
});

上述代码中，当鼠标指针进入parentDiv元素时，会将背景色设置为lightgrey，且当鼠标指针进入parentDiv内的子元素时，子元素的color颜色也会被设置为white。