键盘事件

键盘事件

开发工具与关键技术： VS、JS
作者：方建恒 ；年级：20级 ；撰写时间： 2021 年 8 月 18日
下面我们来看一下Javascript里的键盘事件，
首先我们要知道键盘事件是什么，
键盘事件就是在我们按下某个键盘按键时电脑会触发其对应的的事件。
下面我们来看一下一些常见的键盘事件：

1. onkeydown：当某个键盘按键被按下时所触发的事件。
   如果一直按着不放则会一直触发onkeydown事件，
   为了防止误触在onkeydown事件一直被触发时，
   第一次和第二次的间隔会变长，其他的则会很快。
2. onkeyup：当某个被按下的键盘按键被松开时所触发的事件。
   键盘事件一般都会被绑定给可以获取焦点的对象或者是document。
   在键盘事件中我们可以通过keyCode来获取键盘按键的编码，
   通过它我们可以判断出是哪个键盘按键被按下。
   我们还可以通过某些特定事件来判断出它所对应的特殊按钮。
   如：
3. altKey属性是用来判断alt键是否被按下，
   若如果被按下了则返回true，否则返回false。
4. ctrlKey属性是用来判断ctrl键是否被按下，
   若如果被按下了则返回true，否则返回false。
5. shiftKey属性是用来判断shift键是否被按下，
   若如果被按下了则返回true，否则返回false。
   keyCode的具体使用方法如下图所示：
   
   注：键盘字母a键对应的键盘按键的编码为65。
   若想要知道其他按键的对应编码可以上网自行查找。
   当你想要同时触发两个按键时，你可以同过&&将触发条件链接起来，
   例如我要在同时按下a和按下shift的情况触发事件，我就可以这样做，如图：

接下来我们用switch语句来编写用键盘的方向键来控制屏幕上方块的移动。
首先switch语是用于基于不同的条件来执行不同的动作。
我们要首先设置表达式 n（通常是一个变量）。
随后表达式的值会与结构中的每个 case 的值做比较。
如果存在匹配，则与该 case 关联的代码块会被执行。
（注：切记在case运行过后要用break来阻止代码自动的向下一个case运行。）
然后我们要用方向键的键盘编码来作为判断依据。
方向键的键盘编码如下：
1.向左:37。 2.向上：38。 3.向右：39。 4.向下：40。
然后用offsetLeft属性和offsetTop属性分别返回元素的水平偏移位置和元素的垂直偏移位置。
案例如下图所示：

注：offsetLeft属性和offsetTop属性后面的数值可以任意更改。
这样你就可以通过键盘的方向键来控制屏幕上的小方块。