JavaScript 鼠标移动事件：mouseover/out vs mouseenter/leave

在 JavaScript 中，处理鼠标移动事件时，有四个相关的事件类型可以分为两组：

mouseover 和 mouseout 事件

1. mouseover - 当鼠标指针进入元素或其子元素时触发
2. mouseout - 当鼠标指针离开元素或其子元素时触发

特点：

• 会冒泡（bubble）
• 当鼠标在元素内部移动时，可能在子元素间反复触发
• 对子元素的变化敏感

element.addEventListener('mouseover', function() {
  console.log('鼠标进入元素或其子元素');
});

element.addEventListener('mouseout', function() {
  console.log('鼠标离开元素或其子元素');
});

mouseenter 和 mouseleave 事件

1. mouseenter - 当鼠标指针进入元素时触发（不包括子元素）
2. mouseleave - 当鼠标指针离开元素时触发（不包括子元素）

特点：

• 不冒泡
• 只在鼠标真正进入/离开元素边界时触发
• 对子元素的变化不敏感

element.addEventListener('mouseenter', function() {
  console.log('鼠标进入元素边界');
});

element.addEventListener('mouseleave', function() {
  console.log('鼠标离开元素边界');
});

主要区别

实际应用建议

• 如果需要精确控制鼠标进入/离开元素边界的行为，使用 mouseenter/mouseleave
• 如果需要监测鼠标在元素及其子元素间的移动，使用 mouseover/mouseout
• 现代开发中，mouseenter/mouseleave 通常更符合直觉需求

性能考虑

由于 mouseover/mouseout 会在子元素间移动时频繁触发，可能对性能有更大影响，特别是在复杂 DOM 结构中。