JavaScript 鼠标事件：enter/leave 与 over/out 的区别

在 JavaScript 中，鼠标事件 mouseenter/mouseleave 和 mouseover/mouseout 常被混淆，但它们的行为存在关键差异。以下是具体区别和代码示例：

事件冒泡与子元素触发

mouseover 和 mouseout 会冒泡（bubble）c4j.kxjzhibo.cn，且当鼠标进入/离开目标元素的子元素时也会触发。
mouseenter 和 mouseleave 不冒泡，且仅在鼠标进入/离开目标元素本身时触发。

代码示例：

<div id="parent">
  Parent
  <div id="child">Child</div>
</div>

<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');

  // mouseover/mouseout：子元素触发会导致父元素重复触发
  parent.addEventListener('mouseover', () => console.log('mouseover'));
  parent.addEventListener('mouseout', () => console.log('mouseout'));

  // mouseenter/mouseleave：仅父元素本身触发
  parent.addEventListener('mouseenter', () => console.log('mouseenter'));
  parent.addEventListener('mouseleave', () => console.log('mouseleave'));
</script>

当鼠标从父元素移动到子元素时：

• mouseover 和 mouseout 会分别触发（因事件冒泡）。
• mouseenter 和 mouseleave 不会触发arn.zw-gov.cn
  。

事件传播机制

mouseenter 和 mouseleave 的设计避免了事件冒泡的干扰，更适合监听“是否在元素内”的状态。
mouseover 和 mouseout 适合需要精准跟踪鼠标路径的场景。vaf.kzb-gov.cn

实际应用场景：

• 悬停菜单：使用 mouseenter/mouseleave 避免子元素触发导致闪烁。
• 拖拽交互：使用 mouseover/mouseout 跟踪鼠标移动路径。

代码对比：实现悬停效果

<style>
  #box { width: 200px; height: 200px; background: #eee; }
  #box.hover { background: #ff0; }
</style>

<div id="box"></div>

<script>
  const box = document.getElementById('box');

  // 使用 mouseenter/mouseleave（推荐）
  box.addEventListener('mouseenter', () => box.classList.add('hover'));
  box.addEventListener('mouseleave', () => box.classList.remove('hover'));

  // 使用 mouseover/mouseout（可能意外触发）
  // box.addEventListener('mouseover', () => box.classList.add('hover'));
  // box.addEventListener('mouseout', () => box.classList.remove('hover'));
</script>

总结

1. 冒泡行为：mouseover/mouseout 会冒泡，mouseenter/mouseleave 不会。
2. 子元素影响：前者对子元素敏感，后者仅关注目标元素边界。ng4.tiyu-gov.cn
3. 性能建议：优先使用 mouseenter/mouseleave 实现悬停效果，减少不必要的触发。