滚轮事件
在 Web 开发中监听鼠标滚轮事件时，不同浏览器存在差异。下面是对 onmousewheel、DOMMouseScroll 和标准 wheel 事件的完整说明和兼容写法。
🌀 onmousewheel 事件概览
onmousewheel 是早期浏览器（如 IE 和 Chrome）支持的鼠标滚轮事件。- Firefox 不支持
onmousewheel，而是使用 DOMMouseScroll。
element.onmousewheel = function(e) {console.log('滚轮滚动：', e.wheelDelta);
};
🦊 Firefox 中使用 DOMMouseScroll
DOMMouseScroll 是 Firefox 早期版本支持的事件，只能使用 addEventListener 绑定：
element.addEventListener('DOMMouseScroll', function(e) {console.log('Firefox 滚轮滚动：', e.detail);
});
✅ 推荐使用现代标准事件 wheel
element.addEventListener('wheel', function(e) {console.log('标准滚动事件：', e.deltaY);
});
e.deltaY > 0 表示向下滚，< 0 表示向上滚
🧩 跨浏览器统一写法
function addMouseWheel(element, handler) {if ('onwheel' in document) {element.addEventListener('wheel', handler);} else if ('onmousewheel' in document) {element.addEventListener('mousewheel', handler);} else {element.addEventListener('DOMMouseScroll', handler);}
}addMouseWheel(document, function(e) {e = e || window.event;const delta = e.wheelDelta || -e.detail || -e.deltaY;if (delta > 0) {console.log('🟢 向上滚');} else {console.log('🔻 向下滚');}e.preventDefault ? e.preventDefault() : (e.returnValue = false);
});
✅ 注意点
- wheelDelta 表现向上/下滚动的数值，但在火狐中需要使用detail
- 当滚轮滚动时，若浏览器有滚动条，滚动条会随之滚动，若不希望发生，则使用return false 取消
- 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false，需要使用event.preventDefault()
- IE8 中，event.preventDefault()不能使用
✅ 总结对比表格
| 事件名 | 支持浏览器 | 是否标准 | 如何绑定 |
|---|
onmousewheel | Chrome、IE | ❌ 非标准 | onmousewheel 或 addEventListener |
DOMMouseScroll | Firefox | ❌ 非标准 | 只能用 addEventListener |
wheel | 所有现代浏览器 | ✅ 推荐使用 | 推荐使用 addEventListener |
键盘事件
在 Web 开发中，键盘事件是用户交互中非常常见的一类。主要有三个核心事件：
keydown：键盘按下时触发（持续触发）keypress：按下字符键时触发（已废弃）keyup：键盘释放时触发
1️⃣ keydown
- 事件在按键被按下时触发。
- 适用于所有键（包括功能键如 Ctrl、Shift、Arrow 等）。
- 可以持续触发（长按）。
document.addEventListener('keydown', function(e) {console.log('按下：', e.key, e.code);
});
2️⃣ keypress（⚠️ 已废弃）
- 只对字符键有效（如 a-z、0-9、空格等）。
- 功能键（如 Shift、Enter、Esc）不会触发该事件。
- 在现代浏览器中已经被弃用，不推荐使用。
document.addEventListener('keypress', function(e) {console.log('keypress：', e.key);
});
⚠️ 建议改用 keydown 代替。
3️⃣ keyup
- 在键盘释放时触发。
- 常用于输入完成后的处理，例如表单提交、命令执行等。
document.addEventListener('keyup', function(e) {console.log('松开：', e.key);
});
🔑 常用属性说明
| 属性 | 说明 |
|---|
e.key | 按下的键的值（如 “a”, “Enter”） |
e.code | 实体键的编码（如 “KeyA”, “Enter”） |
e.keyCode | 旧标准中的键码（已废弃，仍可用） |
e.ctrlKey | 是否按住了 Ctrl 键 |
e.shiftKey | 是否按住了 Shift 键 |
e.altKey | 是否按住了 Alt 键 |
🔄 键值举例（e.key）
| 键 | e.key 值 | e.code 值 |
|---|
| A | “a” / “A” | “KeyA” |
| Enter | “Enter” | “Enter” |
| 空格 | " " | “Space” |
| Shift | “Shift” | “ShiftLeft” / “ShiftRight” |
| ↑（上箭头） | “ArrowUp” | “ArrowUp” |
🧩 实战示例：检测组合键 Ctrl + S
document.addEventListener('keydown', function(e) {if (e.ctrlKey && e.key.toLowerCase() === 's') {e.preventDefault(); alert('已触发 Ctrl + S');}
});
✅ 总结对比表
| 事件名 | 触发时机 | 是否支持所有键 | 是否被废弃 |
|---|
keydown | 键按下时 | ✅ 是 | ❌ 否 |
keypress | 字符键按下时 | ❌ 仅字符键 | ⚠️ 是 |
keyup | 键释放时 | ✅ 是 | ❌ 否 |
📌 小贴士
- 开发中推荐使用
keydown + keyup，不要再使用 keypress。 - 若需判断组合键（如 Ctrl + S、Alt + F4），可配合
e.ctrlKey、e.altKey 使用。 e.keyCode 虽然仍可用，但已被标准废弃，应改用 e.key 和 e.code。
利用左右上下，让页面中的方块移动
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.circle {width: 100px;height: 100px;background-color: red;position: absolute;}</style></head><body><div class="circle" id="box1"></div></body><script type="text/javascript">let box1 = document.getElementById("box1");document.onkeydown = function(event) {event = event || window.event;if (event.keyCode == 37) {box1.style.left = box1.offsetLeft- 10 +"px";console.log(box1.style.left)}if (event.keyCode == 39) {box1.style.left = box1.offsetLeft+10 +"px";console.log(box1.style.left)}if (event.keyCode ==38) {box1.style.top = box1.offsetTop-10 +"px";console.log(box1.style.top)}if (event.keyCode ==40) {box1.style.top = box1.offsetTop+10 +"px";console.log(box1.style.top)}return false}</script>
</html>
