mouseenter不冒泡且仅在鼠标首次进入绑定元素自身可视区域时触发，mouseover会冒泡且只要进入元素或其任意子元素的盒模型范围（content+padding+border）即触发。
mouseenter 和 mouseover 都能监听鼠标进入元素，但边界判定逻辑完全不同：mouseover 会冒泡、会响应子元素的移入；mouseenter 不冒泡、只在真正进入绑定元素**自身可视区域**时触发。
mouseover 的边界判定：基于事件冒泡与目标路径
mouseover 在鼠标进入任意后代元素（包括 padding、border、内容区）时都会触发，且会向上冒泡到父级。也就是说，只要鼠标“物理上”进入了该元素或其任意子元素的渲染区域，就会触发，哪怕只是划过一个 span 或图标。
- 触发条件宽松：进入元素自身或任意子节点的盒模型范围（content + padding + border）即算“进入”
- 频繁触发：在嵌套结构中，鼠标从父容器移向子按钮，会先触发父的 mouseover，再触发子的 mouseover
- event.target 指向最深的被移入元素（如某个 span），不是绑定事件的父容器
mouseenter 的边界判定：严格匹配绑定元素的边界框
mouseenter 只在鼠标**首次跨越绑定元素自身的外边框（outer boundary）** 时触发，且不冒泡。它忽略所有子元素的内部移动——只要鼠标没离开父元素的 border-box，就不会再次触发。
- 触发时机唯一：仅当鼠标从父元素外部（或空白）直接进入该元素的完整盒模型（含 border）时触发一次
- 无视子元素：在父容器内从 div 移到 button，不会触发父的 mouseenter（因为未离开父边界）
- event.currentTarget 始终是绑定事件的元素，target 可能是子元素，但不影响判定逻辑
实际区分技巧：用嵌套结构验证触发时机
写一个带子元素的容器，同时绑定两个事件，打印触发信息：
<div id="box">
外层容器
<button>子按钮</button>
</div>
<p>const box = document.getElementById('box');
box.addEventListener('mouseover', () => console.log('mouseover'));
box.addEventListener('mouseenter', () => console.log('mouseenter'));</p>操作观察：
- 鼠标从页面空白处进入 box 文字区域 → mouseover 和 mouseenter 都触发（顺序：mouseover 先）
- 鼠标从文字移到 button 上 → mouseover 再次触发（target 是 button），mouseenter 不触发
- 鼠标从 button 移出 box 边界 → mouseout 触发；再移回 box 任意位置 → mouseenter 再次触发
选哪个？看你要响应“进入区域”还是“进入意图”
需要高亮整个菜单栏、且不希望子项悬停干扰父态？用 mouseenter。需要做精细热区统计（比如追踪用户是否扫过某段文案里的某个词）？用 mouseover。
- 做下拉菜单显隐、卡片整体 hover 效果 → 优先 mouseenter（避免子元素反复触发闪动）
- 做富文本交互、元素级埋点、拖拽预览边界检测 → mouseover 更合适
- 注意：两者都无视 pointer-events: none 的元素，但受 visibility: hidden 影响（hidden 元素不触发）
