简述鼠标事件onmouseover、onmouseout 与 onmouseenter、onmouseleave 的区别

前言在JavaScript的DOM（文档对象模型）中，鼠标事件是一种常见的事件类型，用于响应用户与鼠标的交互。onmouseover、onmouseout、onmouseenter 和 onmouseleave 是四种处理鼠标进入和离开元素的JavaScript事件。尽管它们看起来很相似，但在实际使用中存在一些关键差异。以下将详细介绍这些差异，并通过示例进行说明。这个知识点，也是本人之前在写前端的时候遇到的需求，所以整理出来，跟大家一起分享。

区别首先按照事件触发范围和事件冒泡情况进行介绍，这四种事件的区别。

1. 事件触发范围先来介绍这两种事件 onmouseover 和 onmouseout

onmouseover 当鼠标指针移动到元素上时，会触发 onmouseover 事件。onmouseout 当鼠标指针从元素移动出来时，会触发 onmouseout 事件。这两种事件不仅会在鼠标指针直接经过元素时触发，而且当鼠标指针经过元素的子元素时也会触发。这意味着这两种事件具有事件冒泡的特性。直接上代码进行演示：

代码语言：html复制

接下来是另外两个事件 onmouseenter 和 onmouseleave

onmouseenter 当鼠标指针移动到元素上时，会触发 onmouseenter 事件。onmouseleave 当鼠标指针从元素移动出来时，会触发 onmouseleave 事件。与前两者不同，这两种事件仅在鼠标指针直接经过元素时触发，而不会在鼠标指针经过元素的子元素时触发。此外，onmouseleave 事件不支持事件冒泡。同样也是直接上代码进行演示：

代码语言：html复制

2. 事件冒泡接下来就说事件冒泡了，主要以下区别

onmouseover 和 onmouseout 支持事件冒泡，即当事件触发后，它不仅仅影响当前元素，还会沿着DOM树向上冒泡，影响到父元素。onmouseenter 和 onmouseleave 不支持事件冒泡。这意味着当你使用这些事件时，它们只会在指定的元素上触发，而不会影响到其他元素。特别是 onmouseleave，它不会在子元素上触发，也不会冒泡到父元素。总结本文主要是简述鼠标事件onmouseover、onmouseout 与 onmouseenter、onmouseleave 的区别，能在实际开发中进行区分，希望能给前端的同学有一点的帮助。总的来说，有如下区别

onmouseover 和 onmouseout 在鼠标指针移动到元素或其子元素时会触发，并且支持事件冒泡。onmouseenter 和 onmouseleave 仅在鼠标指针直接移动到元素上时触发，且不支持事件冒泡，这使得它们在某些情况下比 onmouseover 和 onmouseout 更可靠，特别是在需要精确控制事件触发的场景中。我正在参与2024腾讯技术创作特训营最新征文，快来和我瓜分大奖！