这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战

前言

大家好，我是不吃鱼d猫，今天是虎年第一天，给大家拜个新年。不过咱还是要更更文章，前面给大家说了说点击事件，今天给大家说说简单的键盘事件，大家平时在使用微信啊，QQ啊，等一些社交软件时，发送消息是不是喜欢用enter发送消息。今天就来实现实现。

键盘事件

比较好记，因为什么，因为语义化严重

keyup触发一次
keydown持续性触发
keypress按压注意的是，键盘事件一般绑定给document

需求

按下键盘中的enter键，触发事件。还可以组合键触发事件。

实现

实现之前我们说说事件对象，我之前好像没有说过。

事件对象

事件处理函数的第一个参数表示的是事件对象event,事件对象是用户记录事情发生的整个过程，只有一个参数。例如我们现在有个结构

 <div>
        <p></p>
    </div>
    //div便签是黑色的，p标签是红色的

我们在document中点击，可以用事件对象判断点击的目标
target目标，具体由哪个标签触发的，如下代码所示，我们这里有点小技巧，短路赋值，||后面的内容为保底的值，一般应用于兼容问题，对于兼容问题，当然主要是IE的兼容，不过现在用IE的少了，做前端的相对于以前考虑兼容问题变少了。

document.onclick = (e) => {
            e = e || event;
            console.log(e.target);
        }

我们在依次点击p标签，div标签，网页空白处后，控制台会打印

键盘事件的用法

e.key表示键值用法：

 document.onkeyup = (e) => {
            console.log(e.key);
        }

按下键盘，会在控制台打印按下的键盘内容，如图所示：

e.keyCode表示键值对应的ASCII码值（都会被识别成小写）用法：

  document.onkeyup = (e) => {
            console.log(e.keyCode);
        }

比如我们按下键盘的Ctrl键，还有enter键，打印的值都是他们对应的ASCII值

实现enter触发事件

单个按键

 document.onkeyup = (e) => {
            let code = e.keyCode;
            if ( code == 13) {
                alert("发送成功")
            }
        }

核心思想就是：判断按下的按键的ASCII码值是不是enter对应的值，是的话就触发事件，注意的是，code只能存一个值

组合键

实现Ctrl+enter

 document.onkeyup = (e) => {
            let code = e.keyCode;
            if (e.ctrlKey && code == 13) {
                alert("发送成功")
            }
        }

每日补充

pointer-events: none;css属性，事件禁用
其实今天咱们说的键盘事件运用的蛮广泛的，用js写小游戏的时间要用到的，比如经典的小游戏贪吃蛇，是不是运用键盘事件上下左右。

js中感兴趣的键盘事件，可以写小游戏啦

前言