Event事件学习实用路线（9）——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键