Event事件之鍵盤事件——案例：鍵盤操作元素位置
鍵盤事件
keydown、keyup
這兩事件沒太多好說的，非常簡單，大家看代碼即可掌握了。
document.addEventListener("keydown", function(){
console.log('鍵盤按下');
});
document.addEventListener("keyup", function(){
console.log('鍵盤擡起');
});
keydown:鼠標按下事件
keyup：鼠標擡起事件
當一直按住鍵盤，不擡起，就一直執行keydown事件。
鍵盤事件-事件對象
// 鍵盤按下
document.addEventListener('keydown',function(e){
console.log(e)
})
event.keyCode、event.key
上例中，xiao迪按了“F12”鍵，我們在log中可以看到key和keycode的值，一個是“F12”，一個是“123”。
document.addEventListener("keydown", function(e){
console.log("--------------------------------------");
console.log("鍵碼: " + e.keyCode)
console.log("鍵值: " + e.key)
});
keyCode ：鍵碼
e.key ：鍵值
event.ctrlKey、event.altKey、event.shiftKey
document.addEventListener("keydown", function(e){
console.log("--------------------------------------");
console.log("鍵碼: " + e.keyCode);
console.log("鍵值: " + e.key);
console.log("是否按下Ctrl鍵: " + e.ctrlKey);
console.log("是否按下alt鍵: " + e.altKey);
console.log("是否按下shift鍵" + e.shiftKey);
});
e.ctrlKey：是否按下Ctrl鍵
e.altKey： 是否按下alt鍵
e.shiftKey：是否按下shift鍵
後面我們會再對鍵盤事件的應用做闡述，總之大家肯定能想到鍵盤事件是會頻繁使用的。
案例：鍵盤操作元素位置
我們先看看“上”、“下”、“左”、“右”的鍵碼：
document.addEventListener("keydown", (e)=>{
console.log(e.key, e.keyCode);
});
左 ：37
上 ：38
右 ：39
下 ：40
有的朋友可能會問直接用key就好，爲啥還麻煩地去去用keycode，因爲在平臺方面存在一些兼容問題，xiao迪這裏還是強烈推薦大家儘量能用keycode就用它做邏輯處理！
代碼相信應該不難，如果對某個方法有問題，問度娘一定會得到解決。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 200px;
height: 200px;
background:red;
position:absolute;
}
</style>
<body>
<div></div>
<script>
let div = document.querySelector("div");
const speed = 5;
document.addEventListener("keydown", (e)=>{
// console.log(e.key, e.keyCode);
switch (e.keyCode) {
case 39:
div.style.left = parseFloat(window.getComputedStyle(div).left) + speed + "px";
break;
case 37:
div.style.left = parseFloat(window.getComputedStyle(div).left) - speed + "px";
break;
case 38:
div.style.top = parseFloat(window.getComputedStyle(div).top) - speed + "px";
break;
case 40:
div.style.top = parseFloat(window.getComputedStyle(div).top) + speed + "px";
break;
default:
// F12和F5除外
if (e.keyCode == 123 || e.keyCode == 116)
{
break;
}
alert("請按方向鍵進行操作！");
break;
}
});
</script>
</body>
</html>
可能會有些卡頓，我們可以利用定時器或者動畫幀進行優化，xiao迪在這裏就不擴展了，如果想了解，請看小編分享的定時器或者動畫部分的學習分享。
案例：鍵盤事件組合鍵控制
transform:scale(1.5) <CSS3樣式>設置縮放比例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 200px;
height: 200px;
background:red;
position:absolute;
}
</style>
<body>
<div></div>
<script>
let div = document.querySelector("div");
const speed = 5;
let scale = 1;
document.addEventListener("keydown", (e)=>{
// console.log(e.key, e.keyCode);
switch (e.keyCode) {
case 39:
div.style.left = parseFloat(window.getComputedStyle(div).left) + speed + "px";
break;
case 37:
div.style.left = parseFloat(window.getComputedStyle(div).left) - speed + "px";
break;
case 38:
div.style.top = parseFloat(window.getComputedStyle(div).top) - speed + "px";
break;
case 40:
div.style.top = parseFloat(window.getComputedStyle(div).top) + speed + "px";
break;
default:
// F12和F5除外
if (e.keyCode == 123 || e.keyCode == 116|| e.keyCode == 17)
{
break;
}
alert("請按方向鍵進行操作！");
break;
}
if(e.keyCode == 38 && e.ctrlKey){
scale += 0.5;
div.style.transform = `scale(${scale})`;
}
if(e.keyCode == 40 && e.ctrlKey){
scale -= 0.5;
div.style.transform = `scale(${scale})`;
}
});
</script>
</body>
</html>
ctrl + 方向上鍵 放大
ctrl + 方向下鍵 縮小
（後續待補充）