当鼠标指针位于某个元素上时，我们通常会触发一些事件来响应这个交互。在前端开发中，鼠标悬停和 MouseEnter 事件是两种经常使用的方式之一。虽然它们看起来很相似，但实际上它们有一些关键的区别。
概述
鼠标悬停事件（Hover）是指当鼠标指针进入或离开一个元素的边界时，会触发相应的事件处理函数。而 MouseEnter 事件则只在鼠标指针进入元素时才会被触发，离开元素时不会触发。
区别
触发次数
鼠标悬停事件可能会触发多次，因为当鼠标指针在元素内移动时，会不断地进入和离开元素的边界。而 MouseEnter 事件只会在鼠标第一次进入元素时触发，并且在鼠标离开元素后再次进入时也不会再次触发。
冒泡行为
鼠标悬停事件可以冒泡到父级元素，即当鼠标指针在子元素与父元素之间移动时，会依次触发子元素的鼠标悬停事件和父元素的鼠标悬停事件。而 MouseEnter 事件不会冒泡，即只有在进入当前元素时才会触发相应的事件处理函数。
用法
鼠标悬停事件通常用于实现一些交互效果，如显示隐藏的菜单、弹出提示框等。而 MouseEnter 事件则更适合用于实现一些需要精确控制的交互效果，如拖拽、画图等。
示例代码
以下是一个简单的示例，演示了鼠标悬停和 MouseEnter 事件的区别。
-- -------------------- ---- ------- --------- ----- ------ ------ ------------- -- ------------------ ------- ------ ----- ---------- ------------------------ ----- -------- ------------ --------- ----- --------------- ------------------------ ----- -------- ----------------- --------- --------- ------- ------------ - --------------------------------- --------------------------------------------- ---------- - --------------------------- ----------------------------- - ------- ----- --------------------------------------------- ---------- - ------------------------ ----------------------------- - ------- ----- ------- ----------------- - -------------------------------------- ------------------------------------------------- ---------- - -------------------------------- ----------------------------- - ------- ----- ------------------------------------------------ ---------- - ----------------------------- ----------------------------- - ------- ----- ---------- ------- -------
在这个例子中，当鼠标进入和离开 hover 元素时，控制台会输出相应的日志，并改变元素的背景色。而当鼠标进入和离开 mouseenter 元素时，同样会输出相应的日志并改变元素的背景色。但由于 MouseEnter 事件只触发一次，因此我们只会看到一条 MouseEntered! 的日志。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10046
