mouseenter、mouseleave 和 mouseover事件关系和使用

前言

     鼠标经过动画是前端项目一个非常常见且重要的需求。我们常用的实现方法有两种，第一是使用css中的hover属性，第二则是利用JavaScript 提供的处理事件的函数。

     本文主要展开解释的是 mouseenter、mouseleave 和 mouseover 这三个JavaScript 中用于处理鼠标事件的函数，它们之间有着明显的区别和特定的使用场景。这些事件通常与 DOM 元素相关联，用于在用户的鼠标指针与元素交互时触发特定的行为。

mouseenter 和 mouseleave

1. mouseenter
       当鼠标指针进入 元素边界 时触发，一旦鼠标指针进入元素，直到它离开该元素（不包括移动到其任何子元素），mouseenter 事件都不会再次触发。此外该事件不会在鼠标移动到该元素的后代元素时重复触发。

2. mouseleave
       当鼠标指针离开 元素边界 时触发，事件在鼠标离开元素时触发，同样的如果鼠标移动到元素的后代元素，也不会触发此事件。

3. 用途
       这两个事件一般配对出现，适用于需要在鼠标进入元素时执行一次性操作，而不考虑鼠标在元素内部如何移动的情况，例如 显示和隐藏工具提示、切换元素的显示状态等。

4. Vue使用

   <div class="case-box">
       <div class="case-item" 
       	@mouseenter = "caseHoverID = item.id" 
       	@mouseleave = "caseHoverID = -1">
       	****
       </div>
   </div>
   

mouseover

1. mouseover
       当鼠标指针移动到元素或其任何子元素上时触发。与 mouseenter 不同，mouseover 事件会在鼠标指针进入元素或其任何子元素时触发。这意味着，如果鼠标在元素内部移动，并且经过其子元素，mouseover 事件可能会被多次触发，或者说重复触发。

2. 用途
       适用于需要精确跟踪鼠标在元素及其子元素上移动的情况，如实现复杂的鼠标交互效果或动态更新元素状态。

3. Vue使用

   <div class="case-box">
       <div class="case-item" @mouseover= "caseHoverID = item.id" >
       	****
       </div>
   </div>
   

总的来说，这三种事件各有特点，依据不同的性能特点选择合适的事件函数，对实现鼠标和元素之间的交互效果非常重要。