这是我参加 2022 年首次更新挑战赛的第 8 天。 详情请查看：2022首次更新挑战

前言

大家好，我是一只不吃鱼的猫。 今天是虎年第一天。 祝大家新年快乐。 但我们仍然需要更新这篇文章。 我之前告诉过您有关点击事件的信息。 今天我就来说说简单的键盘事件。 您平时使用微信、QQ等社交软件时，是否喜欢使用回车键来发送消息？ 发送一个消息。 今天就让它发生吧。

键盘事件

它更容易记住，因为它非常语义化。

需要

按键盘上的回车键即可触发事件。 事件也可以通过组合键触发。

完成

在实现之前，我们先来说一下事件对象。 我想我之前没有提到过。

事件对象

事件处理函数的第一个参数代表事件对象。 事件对象是用户记录事件的整个过程，只有一个参数。比如我们现在有一个结构体

 

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

当我们点击的时候，我们可以通过事件对象来确定点击目标。

目标，具体是触发哪个标签，如下代码所示。 我们这里有一个小技巧，短路赋值，||后面的内容是一个保证值，一般用于兼容性问题。 对于兼容性问题，当然主要是IE兼容性。 然而，现在使用 IE 的人越来越少，考虑兼容性问题的前端开发人员也比以前更少了。

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

我们依次点击网页上的p标签、div标签、空白区域后，控制台会打印

如何使用键盘事件

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

当按下键盘时，控制台上会打印按下的键盘内容，如图：

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

例如，当我们按下键盘上的Ctrl键和回车键时，打印的值就是它们对应的ASCII值。

实现单键按下的enter触发事件

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

核心思想是：判断按下的按钮的ASCII码值是否是回车对应的值。 如果是，则触发该事件。 请注意，该代码只能存储一个值。

组合键

执行Ctrl+Enter

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

每日补货

-： 没有任何; css 属性，事件禁用

事实上，我们今天所说的键盘事件应用非常广泛。 用js写小游戏时会用到它们。 例如，经典游戏贪吃蛇就使用了键盘事件的上、下、左、右。