- 键盘按下事件:onkeydown
document.onkeydown = function () {
console.log("down");
}
- 键盘按下事件:onkeypress
document.onkeypress= function () {
console.log("press");
}
- 键盘抬起事件:onkeyup
document.onkeyup= function () {
console.log("up");
}
那onkeydown和onkeypress有什么区别呢?有两大区别:1.onkeydown总是在onkeypress前触发。2.onkeydown支持所有得按键而onkeypress不支持功能键(enter除外)
课外扩展:每个按键都有一个keyCode(键值)附图如下:
有了这个神器那我们就可以做个小案例了:通过键盘移动方块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#warp{
position: absolute;
left: 200px;
top: 100px;
width: 50px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div id="warp"></div>
<script>
(function () {
let oWarp = document.getElementById("warp");
document.onkeydown = function (ev) {
let keyCode = ev.keyCode;
switch (keyCode) {
case 83:
console.log(ev)
oWarp.style.top = oWarp.offsetTop + 5+"px";
break;
case 65:
oWarp.style.left = oWarp.offsetLeft - 5+"px";
break;
case 87:
oWarp.style.top = oWarp.offsetTop - 5+"px";
break;
case 68:
oWarp.style.left = oWarp.offsetLeft + 5+"px";
break;
}
}
})()
</script>
</body>
</html>
效果如下: