JS鼠标移入移出事件的详解

一、基本概念

JS鼠标移入移出事件，顾名思义就是在鼠标移入或移出某个元素时触发的一种事件。这种事件被广泛应用于网页开发中，常用于实现鼠标交互效果，如弹出菜单、提示信息、轮播图等。

在JS中，鼠标移入移出事件分别对应了两个事件：mouseover和mouseout。当鼠标移入某个元素时，会触发mouseover事件；当鼠标移出该元素时，会触发mouseout事件。下面是两个事件的代码示例：


// 鼠标移入事件
element.addEventListener('mouseover', function() {
  // 代码块
});

// 鼠标移出事件
element.addEventListener('mouseout', function() {
  // 代码块
});

二、事件对象

在JS的事件处理程序中，事件对象是一个重要的概念。它代表着当前正在处理的事件，包含了事件发生时的相关信息。

在鼠标移入移出事件中，事件对象中尤其重要的属性是target和relatedTarget。target属性表示事件目标，即发生事件的元素；relatedTarget属性表示相关元素，即与事件有关的元素。

具体来说，当鼠标移入某个元素时，target属性指向该元素，relatedTarget属性指向鼠标移出元素的那个元素；当鼠标移出某个元素时，target属性指向移入元素的那个元素，relatedTarget属性指向移出元素本身。

下面是一个获取事件对象的代码示例：


element.addEventListener('mouseover', function(event) {
  console.log('target:', event.target);
  console.log('relatedTarget:', event.relatedTarget);
});

三、事件委托

事件委托是JS中一种常用的技术，它可以优化事件处理程序的性能，避免浏览器时刻监测多个元素的状态。

具体来说，事件委托的原理是将事件绑定于父元素，通过判断事件目标来触发不同的事件处理程序。这样就可以将事件的处理集中在父元素上，而不必为每个子元素都绑定一个事件处理程序。

在鼠标移入移出事件中，事件委托同样适用。下面是一个通过事件委托实现鼠标移入移出效果的代码示例：


// HTML代码
<ul id="menu">
  <li>菜单1</li>
  <li>菜单2</li>
  <li>菜单3</li>
  <li>菜单4</li>
  <li>菜单5</li>
</ul>

// JS代码
var menu = document.getElementById('menu');
menu.addEventListener('mouseover', function(event) {
  var target = event.target;
  if (target.tagName === 'LI') {
    // 鼠标移入菜单项
    target.style.backgroundColor = '#eee';
  }
});
menu.addEventListener('mouseout', function(event) {
  var target = event.target;
  if (target.tagName === 'LI') {
    // 鼠标移出菜单项
    target.style.backgroundColor = '';
  }
});

四、事件冒泡与捕获

在JS中，事件触发时会按照一定的顺序传递给各个元素。这个顺序有两种方式：事件冒泡和事件捕获。

事件冒泡指的是，事件从最具体的元素（文档中嵌套层次最深的元素）开始，逐级向上传递，直到传递到最不具体的元素（通常是document对象）。在鼠标移入移出事件中，事件冒泡的顺序是先从鼠标移入的元素开始，逐级向上传递；再从鼠标移出的元素开始，逐级向上传递。

事件捕获则是相反的过程，事件从最不具体的元素开始，逐级向下传递，直到传递到最具体的元素。在鼠标移入移出事件中，事件捕获的顺序是先从document对象开始，逐级向下传递；再从鼠标移入的元素开始，逐级向下传递。

默认情况下，JS中的事件处理程序是按照事件冒泡的顺序执行的。但是，我们可以使用addEventListener方法的第三个参数来指定事件触发的顺序是捕获还是冒泡。如果该参数为true，表示使用事件捕获；如果该参数为false或省略，表示使用事件冒泡。

下面是一个通过事件捕获实现鼠标移入移出效果的代码示例：


// HTML代码
<ul id="menu">
  <li>菜单1</li>
  <li>菜单2</li>
  <li>菜单3</li>
  <li>菜单4</li>
  <li>菜单5</li>
</ul>

// JS代码
var menu = document.getElementById('menu');
menu.addEventListener('mouseover', function(event) {
  var target = event.target;
  if (target.tagName === 'LI') {
    // 鼠标移入菜单项
    target.style.backgroundColor = '#eee';
  }
}, true);
menu.addEventListener('mouseout', function(event) {
  var target = event.target;
  if (target.tagName === 'LI') {
    // 鼠标移出菜单项
    target.style.backgroundColor = '';
  }
}, true);

五、节流与防抖

在一些需要对鼠标移入移出事件做频繁处理的场景下，为了防止事件处理函数被过度调用而导致浏览器性能下降，我们需要采用一些节流和防抖的技巧。

节流指的是在一定时间间隔内只触发一次事件处理程序。常见的节流实现方式有两种：时间戳和定时器。其中时间戳是通过记录上一次访问时间来判断是否触发事件处理程序，而定时器是通过设置一个定时器来延迟触发事件处理程序。

下面是一个使用时间戳实现鼠标移入移出节流效果的代码示例：


function throttle(fn, wait) {
  var lastTime = 0;
  return function() {
    var nowTime = +new Date();
    if (nowTime - lastTime > wait) {
      fn.apply(this, arguments);
      lastTime = nowTime;
    }
  }
}

var menu = document.getElementById('menu');
menu.addEventListener('mouseover', throttle(function(event) {
  var target = event.target;
  if (target.tagName === 'LI') {
    // 鼠标移入菜单项
    target.style.backgroundColor = '#eee';
  }
}, 500));
menu.addEventListener('mouseout', throttle(function(event) {
  var target = event.target;
  if (target.tagName === 'LI') {
    // 鼠标移出菜单项
    target.style.backgroundColor = '';
  }
}, 500));

防抖则是指在一定时间内等待事件处理程序是否会被再次触发。如果在这段时间内触发了相同的事件，那么就重新计时。常见的防抖实现方式也有两种：使用定时器和清空定时器。其中使用定时器是在每次调用事件处理程序之前清空定时器，从而排除之前的调用；而清空定时器是在每次调用事件处理程序后重新设置定时器，从而延迟调用事件处理程序。

下面是一个使用清空定时器实现鼠标移入移出防抖效果的代码示例：


function debounce(fn, delay) {
  var timer = null;
  return function() {
    var context = this;
    var args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  }
}

var menu = document.getElementById('menu');
menu.addEventListener('mouseover', debounce(function(event) {
  var target = event.target;
  if (target.tagName === 'LI') {
    // 鼠标移入菜单项
    target.style.backgroundColor = '#eee';
  }
}, 500));
menu.addEventListener('mouseout', debounce(function(event) {
  var target = event.target;
  if (target.tagName === 'LI') {
    // 鼠标移出菜单项
    target.style.backgroundColor = '';
  }
}, 500));