键盘事件
如果想实现快捷的页面操作，或者是一些前端的游戏，了解键盘事件很重要；
onkeydown 某个键盘按键被按下
onkeypress 某个键盘按键被按下并松开
onkeyup 某个键盘按键被松开
这些键盘事件可以使用于除了：
<base>,<bdo>,<br>,<head>,<html>,<iframe>,<meta>,<param>,<script>,<style>, 和<title>其它所有HTML 元素
键盘键值对应的键值码（ascii码）
onkeydown 键盘按下事件
定义和用法：onkeydown 事件会在用户按下一个键盘按键时发生。
如果长按这个按键没松开，那么就会一直调用onkeydown 的方法；
提示： 与 onkeydown 事件相关联的事件触发次序:
onkeydown 键盘按下事件onkeypress 键盘按下并松开事件onkeyup 键盘松开事件
下面代码可以通过输入框聚焦之后，获取在键盘上按键的所有值：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>onkeydown</title><script>function myFunction() {console.log(event) // 对应按键对象所有属性document.getElementById("domKey").innerHTML = event.keydocument.getElementById("domCode").innerHTML = event.codedocument.getElementById("domAscii").innerHTML = event.which}</script></head><body><p>当你在输入框内按下一个按键是函数被触发</p><input type="text" onkeydown="myFunction()"><p>按下按键的Key：<span id="domKey"></span></p><p>按下按键的Code：<span id="domCode"></span></p><p>按下按键的ascii码：<span id="domAscii"></span></p></body></html>
了解以上代码逻辑之后，实现一个简单的效果：
需求：控制一个小方块在页面中的移动，上 — w，下 — s，左 — a ，右 — d，
<!DOCTYPE html><html><head><meta charset="utf-8"><title>onkeydown</title><style type="text/css">body {position: relative;}#boxId {position: absolute;top: 60;left: 60;width: 40px;height: 40px;border-radius: 50%;background-color: red;}</style><script>let domTop = 60; // 初始化let domLeft = 60;// 这里只做了上和左的碰撞校验// 直接将方法丢给body全局触发// 一直按住按键也可以一直移动function myFunction() {let boxDom = document.getElementById("boxId")if (event.which == 87) {// 上 w 87if (domTop > 0) {domTop -= 10;}} else if (event.which == 68) {// 右 d 68domLeft += 10;} else if (event.which == 83) {// 下 s 83domTop += 10;} else if (event.which == 65) {// 左 a 65if (domLeft > 0) {domLeft -= 10;}}boxDom.style.top = domTop + "px";boxDom.style.left = domLeft + "px";}</script></head><body onkeydown="myFunction()"><div id="boxId"></div></body></html>
onkeyup 键盘松开事件
onkeyup 事件会在键盘按键被松开时发生
提示：onkeyup 与 onkeydown 的区别：onkeyup 事件只能一次一次的触发，不能像onkeydown 长按持续触发
下面函数将字符转换为大写：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>onkeyup</title><script>function myFunction() {var x = document.getElementById("fname");x.value = x.value.toUpperCase();}</script></head><body><p>当用户在输入字段释放一个按键时触发函数。函数将字符转换为大写。</p>输入你的名称: <input type="text" id="fname" onkeyup="myFunction()"></body></html>
onkeypress 键盘按键被按下并松开
onkeypress 事件会在键盘按键被按下并释放一个键时发生
注意： 在所有浏览器中 onkeypress 事件只能监听字母和数字，不能监听一些特殊按键（ALT、CTRL、SHIFT、ESC、箭头等）。监听一个用户是否按下按键请使用 onkeydown 事件,所有浏览器都支持 onkeydown 事件
下面函数将字符转换为大写：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>onkeypress</title><script>function myFunction() {alert("你在输入框内按下一个按键");}</script></head><body><p>当用户在输入框内按下一个按键时函数被触发</p><input type="text" onkeypress="myFunction()"></body></html>
