前言
在JavaScript的DOM（文档对象模型）中，鼠标事件是一种常见的事件类型，用于响应用户与鼠标的交互。onmouseover、onmouseout、onmouseenter 和 onmouseleave 是四种处理鼠标进入和离开元素的JavaScript事件。尽管它们看起来很相似，但在实际使用中存在一些关键差异。以下将详细介绍这些差异，并通过示例进行说明。这个知识点，也是本人之前在写前端的时候遇到的需求，所以整理出来，跟大家一起分享。
区别
首先按照事件触发范围和事件冒泡情况进行介绍，这四种事件的区别。
1. 事件触发范围
先来介绍这两种事件 onmouseover 和 onmouseout
- onmouseover 当鼠标指针移动到元素上时，会触发
onmouseover事件。 - onmouseout 当鼠标指针从元素移动出来时，会触发
onmouseout事件。
这两种事件不仅会在鼠标指针直接经过元素时触发，而且当鼠标指针经过元素的子元素时也会触发。这意味着这两种事件具有事件冒泡的特性。直接上代码进行演示：
代码语言：html复制<!-- onmouseover 和 onmouseout 示例 -->
<div id="parent" onmouseover="handleMouseOver()" onmouseout="handleMouseOut()">
鼠标移入我
<div id="child">或者移入我的子元素</div>
</div>
<script>
function handleMouseOver() {
console.log('鼠标移入父元素');
}
function handleMouseOut() {
console.log('鼠标移出父元素');
}
</script>接下来是另外两个事件 onmouseenter 和 onmouseleave
- onmouseenter 当鼠标指针移动到元素上时，会触发
onmouseenter事件。 - onmouseleave 当鼠标指针从元素移动出来时，会触发
onmouseleave事件。
与前两者不同，这两种事件仅在鼠标指针直接经过元素时触发，而不会在鼠标指针经过元素的子元素时触发。此外，onmouseleave 事件不支持事件冒泡。同样也是直接上代码进行演示：
<!-- onmouseenter 和 onmouseleave 示例 -->
<div id="parent" onmouseenter="handleMouseEnter()" onmouseleave="handleMouseLeave()">
鼠标移入我
<div id="child">但不要移入我的子元素</div>
</div>
<script>
function handleMouseEnter() {
console.log('鼠标移入父元素');
}
function handleMouseLeave() {
console.log('鼠标移出父元素');
}
</script>2. 事件冒泡
接下来就说事件冒泡了，主要以下区别
onmouseover和onmouseout支持事件冒泡，即当事件触发后，它不仅仅影响当前元素，还会沿着DOM树向上冒泡，影响到父元素。onmouseenter和onmouseleave不支持事件冒泡。这意味着当你使用这些事件时，它们只会在指定的元素上触发，而不会影响到其他元素。特别是onmouseleave，它不会在子元素上触发，也不会冒泡到父元素。
总结
本文主要是简述鼠标事件onmouseover、onmouseout 与 onmouseenter、onmouseleave 的区别，能在实际开发中进行区分，希望能给前端的同学有一点的帮助。总的来说，有如下区别
onmouseover和onmouseout在鼠标指针移动到元素或其子元素时会触发，并且支持事件冒泡。onmouseenter和onmouseleave仅在鼠标指针直接移动到元素上时触发，且不支持事件冒泡，这使得它们在某些情况下比onmouseover和onmouseout更可靠，特别是在需要精确控制事件触发的场景中。
我正在参与2024腾讯技术创作特训营最新征文，快来和我瓜分大奖！
