专业网站建设公司

JavaScript中鼠标移入移出事件有2组mouseenter/mouseleave、mouseover/mouseout，实战时总是记混，不知道该选用哪一个。

主要区别

1. mouseenter/mouseleave

不冒泡：事件不会向上传播到父元素

更精确：只在鼠标真正进入或离开元素边界时触发

使用场景：复杂的嵌套结构

element.addEventListener('mouseenter', () => {

  console.log('鼠标进入元素');

});

element.addEventListener('mouseleave', () => {

  console.log('鼠标离开元素');

});

2. mouseover/mouseout

会冒泡：事件会向上传播到父元素

更频繁触发：鼠标在元素内部移动时也会触发（因为子元素的变化）

使用场景：需要事件冒泡来实现某些功能。

element.addEventListener('mouseover', (e) => {

  console.log('鼠标进入元素或子元素', e.relatedTarget);

});

element.addEventListener('mouseout', (e) => {

  console.log('鼠标离开元素或进入子元素', e.relatedTarget);

});

实践总结：

大多数场景中，优先使用 mouseenter/mouseleave，不仅性能更好，且不会因为子元素导致意外触发。

特殊情况下，无法满足功能需求，才考虑使用 mouseover/mouseout。