本文介绍如何使用原生 javascript 实现：鼠标悬停时为 div 随机设置背景色，并通过任意按键（如空格或回车）一键重置当前悬停元素的背景色为默认值。核心在于事件委托、状态追踪与样式控制。
在 Web 交互开发中，常需实现“悬停变色 + 快捷重置”的组合效果。但初学者容易陷入两个常见误区：一是混淆 DOM 元素与 style 对象（如误用 element.backgroundColor 而非 element.style.backgroundColor），二是将事件绑定在元素自身（如 onkeydown）却忽略
默认不可聚焦、无法触发键盘事件。
正确做法是采用事件委托 + 状态缓存策略：
- 监听全局 keydown 事件：在 document 级别捕获按键，确保无论焦点在哪都能响应；
- 缓存当前悬停元素的 style 对象：在 mouseover 时记录 event.target.style，避免后续访问丢失引用；
- 统一管理颜色逻辑：使用现代模板字符串生成 RGB 颜色，并确保重置色准确还原为初始值（#ffff99）。
以下是完整可运行代码示例：
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: lightblue; }
.colorCell {
display: inline-block;
border: 1px solid black;
width: 60px;
height: 40px;
margin: 5px;
padding: 5px;
background-color: #ffff99;
border-radius: 0;
cursor: pointer;
/* 关键：使 div 可获得焦点（支持键盘交互） */
tabindex="0"
}
</style>
</head>
<body>
<div class="colorCell"></div>
<div class="colorCell"></div>
<div class="colorCell"></div>
<script>
let hoveredStyle = null;
function getRandomColor() {
return Math.floor(Math.random() * 256);
}
function randomColor(styleObj) {
const r = getRandomColor();
const g = getRandomColor();
const b = getRandomColor();
styleObj.backgroundColor = `rgb(${r}, ${g}, ${b})`;
console.log(`Set color: rgb(${r}, ${g}, ${b})`);
}
function resetColor(styleObj) {
styleObj.backgroundColor = '#ffff99';
}
// 为每个 colorCell 绑定 mouseover 事件
document.querySelectorAll('.colorCell').forEach(cell => {
cell.addEventListener('mouseover', (e) => {
hoveredStyle = e.target.style;
randomColor(hoveredStyle);
});
});
// 全局监听 keydown：按任意键重置当前悬停元素
document.addEventListener('keydown', () => {
if (hoveredStyle) {
resetColor(hoveredStyle);
hoveredStyle = null; // 重置状态，避免重复操作
}
});
// ✅ 增强体验：支持点击后也视为“悬停目标”，并允许按 Enter/Space 触发重置
document.addEventListener('click', (e) => {
if (e.target.classList.contains('colorCell')) {
hoveredStyle = e.target.style;
}
});
</script>
</body>
</html>关键注意事项：
- 默认不响应 keydown，因此需添加 tabindex="0" 使其可聚焦（若需支持键盘导航）；
- onkeydown="resetColor(this.style)" 在内联写法中无效，因 div 无焦点且事件未绑定；
- element.backgroundColor 是错误写法 → 必须使用 element.style.backgroundColor；
- 使用 let hoveredStyle = null 缓存引用比反复查询 DOM 更高效、更安全；
- 重置后建议清空 hoveredStyle，防止误操作影响其他逻辑。
该方案简洁、可扩展性强——如需支持多元素同时重置，只需将 hoveredStyle 改为 Set 或数组即可。
