理解 onmouseover 事件的触发时机与用途
掌握三种绑定鼠标悬停事件的方式（内联、DOM 属性、addEventListener）
能够区分 onmouseover 与 onmouseenter 的行为差异
在实际项目中实现工具提示、动态高亮、图像预览等交互效果
避免常见性能问题（如频繁触发、内存泄漏）
onmouseover 事件onmouseover 是一个鼠标事件，当用户的鼠标指针移动到某个 HTML 元素上时触发。
触发条件：鼠标从外部进入该元素区域（包括其子元素）。
<p onmouseover="showAlert()">将鼠标悬停在此处</p>
<script>
function showAlert() {
alert("鼠标已移入！");
}
</script>用户将鼠标移到 <p> 上 → 弹出提示框
常用于提供即时反馈或辅助信息
<div onmouseover="this.style.backgroundColor='lightblue'">
悬停变色
</div>优点：快速简单
缺点：耦合度高，难以维护，无法复用
const box = document.getElementById("hoverBox");
box.onmouseover = function() {
this.style.border = "2px solid orange";
};可通过 this 访问当前元素
限制：只能绑定一个处理函数
addEventListenerdocument.getElementById("tooltip").addEventListener("mouseover", (e) => {
e.target.textContent = "现在可以点击我！";
e.target.style.cursor = "pointer";
});优势：
支持多个监听器
可移除（removeEventListener）
更好的代码组织与测试性
onmouseover vs onmouseenter<div id="parent" style="padding: 20px; background: #eee;">
父元素
<div id="child" style="padding: 10px; background: #ccc;">子元素</div>
</div>
<script>
document.getElementById("parent").addEventListener("mouseover", () => {
console.log("mouseover 触发");
});
document.getElementById("parent").addEventListener("mouseenter", () => {
console.log("mouseenter 触发");
});
</script>当鼠标从父元素移入子元素时：
mouseover 会再次触发（因为子元素冒泡）
mouseenter 不会再次触发
建议：若只需在“整体进入”时响应一次，优先使用
mouseenter。
onmouseover 几乎支持所有可渲染的 HTML 元素，但以下元素除外：
<base>
<bdo>
<br>
<head>
<html>
<iframe>
<meta>
<param>
<script>
<style>
<title>
这些元素通常不可见或不可交互，因此无法响应鼠标事件。
onmouseover 是早期 Web 标准的一部分，兼容性极佳：
所有现代浏览器均完全支持。
<span class="tooltip" data-tip="这是提示信息">悬停查看提示</span>
<style>
.tooltip {
position: relative;
border-bottom: 1px dashed #999;
}
.tooltip::after {
content: attr(data-tip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.2s;
}
.tooltip:hover::after {
opacity: 1;
}
</style>纯 CSS 实现更高效，但复杂逻辑仍需 JS。
const menuItems = document.querySelectorAll(".menu-item");
menuItems.forEach(item => {
item.addEventListener("mouseover", () => {
// 移除其他项高亮
menuItems.forEach(i => i.classList.remove("active"));
// 高亮当前项
item.classList.add("active");
});
});<img id="preview" src="small.jpg" data-large="large.jpg" />
<script>
document.getElementById("preview").addEventListener("mouseover", function() {
this.src = this.dataset.large; // 切换为大图
});
document.getElementById("preview").addEventListener("mouseout", function() {
this.src = "small.jpg"; // 恢复小图
});
</script>避免频繁操作 DOM
使用 CSS 类切换代替直接修改 style
示例：element.classList.add("hovered")
节流高频事件
mousemove + mouseover 组合可能高频触发
使用 requestAnimationFrame 或节流函数优化
及时清理监听器
在组件销毁或页面跳转前移除事件监听器，防止内存泄漏
为什么在列表项中使用 mouseover 可能导致多次触发？如何用 mouseenter 解决？
如何实现一个“鼠标悬停 500ms 后才显示提示”的延迟 tooltip？请写出带防抖逻辑的代码。
在移动端（无鼠标设备）上，onmouseover 是否有效？如果无效，应如何提供等效的交互体验？