本文介绍一种基于事件委托与状态跟踪的解决方案：为所有 `.colorcell` 元素绑定 `mouseover` 事件以随机设色，并在全局监听 `keydown`，仅当有元素处于悬停状态时重置其背景色。
要实现“鼠标悬停变色 + 按键一键重置”的交互效果，关键在于分离事件逻辑与维护当前状态。原始代码存在两个核心问题：
- onkeydown 无法在 <div> 上直接触发（div 默认不可聚焦，不响应键盘事件）；
- element.backgroundColor 写法错误——应使用 element.backgroundColor 的赋值对象是 HTMLElement.style，但原始 HTML 中 onkeydown="resetColor(this.style)" 的 this 指向的是 DOM 元素本身，而非其 style 对象，且 div 缺少 tabindex 导致无法获得焦点。
✅ 正确做法是：
- 移除内联事件（onmouseover/onkeydown），改用现代事件监听器；
- 使用 document.addEventListener('keydown', ...) 全局监听按键；
- 用一个变量（如 elementHovered）暂存当前被悬停元素的 style 对象，确保 keydown 时能精准操作目标样式；
- 将颜色生成逻辑封装为纯函数，提升可读性与复用性。
以下是完整、可运行的实现方案：
let elementHovered = null;
function getRandomColor() {
return Math.floor(Math.random() * 256);
}
function randomColor(style) {
const r = getRandomColor();
const g = getRandomColor();
const b = getRandomColor();
style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
}
function resetColor(style) {
style.backgroundColor = '#ffff99';
}
// 为每个 .colorCell 绑定 mouseover 事件
document.querySelectorAll('.colorCell').forEach(cell => {
cell.addEventListener('mouseover', () => {
elementHovered = cell.style; // ✅ 直接保存 style 引用
randomColor(elementHovered);
});
});
// 全局监听任意按键（可选：限定为 'Escape' 或 'r' 键增强体验）
document.addEventListener('keydown', (e) => {
if (elementHovered) {
resetColor(elementHovered);
elementHovered = null; // 重置状态，避免重复操作
}
});对应 HTML 无需 onmouseover 或 onkeydown 属性，简洁清晰：
<div class="colorCell"></div> <div class="colorCell"></div> <div class="colorCell"></div>
? 注意事项：
- 若需支持键盘精确控制（例如仅按 R 键重置），可在 keydown 回调中判断 e.key.toLowerCase() === 'r'；
- 当前逻辑是“最后一次悬停的元素”被重置；如需重置所有已变色元素，可改用 Set 存储所有已着色元素的 style，并在 keydown 时遍历重置；
- CSS 中 background-color: #ffff99 作为初始态，确保样式可被 JS 可靠覆盖；
- 不推荐使用 element.style.backgroundColor = '' 清空——这会回退到 CSS 规则或继承值，而非明确恢复初始色，显式赋值更可控。
该方案兼顾语义化、可维护性与用户体验，是处理动态样式+快捷重置场景的标准实践。
