mouseover和mouseenter的区别？

在实现鼠标悬停交互时，mouseover和mouseenter事件看起来功能相似，但它们对事件冒泡和子元素触发的处理方式有本质区别。选错事件常常会导致闪烁或意外的行为。

事件冒泡的触发差异

mouseover事件会冒泡。这意味着当鼠标进入一个元素或其子元素时，事件都会在该元素上触发，并且会向上传播到其祖先元素。

<div id="outer">
  <p id="inner">内部文本</p>
</div>
<script>
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');

outer.addEventListener('mouseover', () => console.log('outer: mouseover'));
inner.addEventListener('mouseover', () => console.log('inner: mouseover'));
</script>

当鼠标从外部直接移入内部的<p>元素时，控制台会打印：

1. inner: mouseover （在目标元素上触发）
2. outer: mouseover （由于冒泡，在外层div上触发）

即使鼠标已经在外层div内部，当它在内部子元素间移动时，mouseover事件仍会在外层div上反复触发。

mouseenter事件不会冒泡。它只在鼠标首次进入绑定元素本身的范围时触发一次，对于进入其子元素完全忽略。

outer.addEventListener('mouseenter', () => console.log('outer: mouseenter'));
inner.addEventListener('mouseenter', () => console.log('inner: mouseenter'));

当鼠标从外部直接移入内部的<p>元素时，控制台会打印：

1. outer: mouseenter （鼠标进入外层div）
2. inner: mouseenter （鼠标进入内层p）
   注意，这次outer: mouseenter不会因为inner的事件而再次触发，因为mouseenter不冒泡。

对子元素穿越的敏感性

这是最关键的实践区别。mouseover和mouseout是“敏感”的，它们会在鼠标穿过元素的任何边界时触发，包括进入或离开其子元素的边界。这经常导致在实现悬浮效果时出现恼人的闪烁。

// 使用 mouseover/mouseout 可能导致闪烁
outer.addEventListener('mouseover', () => outer.style.backgroundColor = 'yellow');
outer.addEventListener('mouseout', () => outer.style.backgroundColor = '');
// 当鼠标在 outer 和 inner 之间快速移动时，背景色会频繁切换

mouseenter和mouseleave是“迟钝”的，它们只关心绑定元素的整体区域。只要鼠标还在这个元素或其任何子元素内，它就被视为仍然“在元素内”，不会触发离开事件。

// 使用 mouseenter/mouseleave 则稳定可靠
outer.addEventListener('mouseenter', () => outer.style.backgroundColor = 'lightblue');
outer.addEventListener('mouseleave', () => outer.style.backgroundColor = '');
// 鼠标在 outer 内部（包括 inner 上）任意移动，背景色保持不变

因此，在为某个元素整体（包含其所有子内容）添加悬停效果时，应始终使用mouseenter和mouseleave这对组合，它们行为更符合直觉且性能更优。只有在需要精确监控鼠标进入/离开每个独立子元素的场景下（例如实现复杂的可视化图表交互），才考虑使用会冒泡的mouseover和mouseout。