面试题：mouseover 和 mouseenter 事件的区别是什么？

mouseover 和 mouseenter 都是鼠标进入元素时触发的事件，但它们在事件冒泡（或事件传播）的行为上有关键区别：

1. mouseover 事件

• 触发时机：当鼠标指针进入元素或其任何子元素时触发。
• 冒泡行为：会冒泡。这意味着如果一个元素有子元素，当鼠标从父元素进入子元素时，mouseover 事件会在子元素上触发，然后冒泡到父元素，导致父元素的 mouseover 事件处理器也会执行。
• 触发频率：在鼠标在父元素和其子元素之间移动时，可能会被多次触发。

2. mouseenter 事件

• 触发时机：当鼠标指针直接进入该元素（从外部进入该元素的边界）时触发。
• 冒泡行为：不会冒泡。更重要的是，当鼠标在该元素内部移动，进入其子元素时，不会再次触发 mouseenter 事件。
• 触发频率：在整个鼠标停留在该元素区域期间，只触发一次（当首次进入时）。

核心区别总结

特性	mouseover	mouseenter
进入子元素时是否触发	是（会冒泡，导致父元素也触发）	否
事件冒泡	是	否
典型用途	需要对元素及其所有后代的进入都做出反应	仅当鼠标真正进入目标元素区域时才响应，常用于悬停效果

示例说明

假设有一个 div，里面包含一个 span 子元素。

<div id="parent">
  父元素
  <span id="child">子元素</span>
</div>

const parent = document.getElementById('parent');

parent.addEventListener('mouseover', () => {
  console.log('mouseover on parent');
});

parent.addEventListener('mouseenter', () => {
  console.log('mouseenter on parent');
});

操作：

1. 鼠标从外部移动到 div 区域上。
   • 输出：mouseenter on parent 和 mouseover on parent （各一次）
2. 鼠标在 div 内部移动到 span 上。
   • 输出：mouseover on parent （再次输出！因为 span 上的 mouseover 冒泡到了 div）
   • mouseenter on parent 不会输出。

结论

简单来说：

• 使用 mouseenter 当你只想在鼠标首次进入目标元素时执行一次操作（比如显示一个工具提示）。
• 使用 mouseover 当你需要对元素内部任何后代元素的进入也做出反应，或者你需要利用其冒泡特性。