在 JavaScript 中使用键盘事件及其代码
5.00/5 (11投票s)
如何使用用户的键盘事件，并用它们来动态更改用户界面或执行某些操作
引言
本文解释了什么是键盘事件，以及如何使用它们来根据用户按下的键动态更改 UI。
背景
事件是编程的重要组成部分，因为它们允许开发人员控制用户界面并覆盖当前显示的内容，以更改它或在软件应用程序中执行任务或函数。
在每种编程语言中，都有处理引发的每个事件的特殊方法。JavaScript 也有这些方法。您可以在事件发生时轻松调用函数，以编程方式，或者您可以在标记中编写代码；在 JavaScript 中，HTML 是标记。
理解事件
事件是用户与应用程序之间通信的一种方式。用户单击一个按钮来告诉应用程序做什么，应用程序执行一个任务并告诉用户做了什么，等等。例如：
<button>Click me</button>
单击后，它将引发一个 click 事件。您可以在事件发生时进一步使用该事件，以相对地处理该事件。
基本上有许多类型的事件，鼠标事件、应用程序事件、系统事件、键盘事件、硬件事件等。但我们只需要处理那些专门供我们处理的事件，例如我们应用程序中的鼠标和键盘事件，应用程序事件如 IsClosing、Starting 等。
鼠标事件
当用户通过鼠标与 UI 交互时，会触发这些事件。当用户按下 UI 控件（如按钮等）时，引发的事件包含有关按下的鼠标按钮及其代码以及其他相关信息。
然后您可以使用这些来触发命令或执行函数。例如，当您单击一个简单的超链接时
<a href="https://codeproject.org.cn">CodeProject</a>
...实际上发生的情况是，当用户单击时，用户代理（浏览器）会收到此调用，并为超链接上的单击引发一个事件。如果应用程序或开发人员似乎对此感兴趣，那么浏览器会让他们随意处理，否则浏览器会自动将您重定向到要查看的新文档的位置。这是浏览器的默认行为。
示例 比如单页应用程序，您不会离开当前页面，但单击链接时，您会在页面内看到新内容，Facebook、Google+ 以及一些其他主要网站使用此功能来最小化其资源文件的加载并仅加载所需数据。
键盘事件
当用户使用键盘向系统输入值时，会触发键盘事件。就像鼠标一样，鼠标按钮的详细信息被附加，类似地，键盘的 keyCode 和其他事件的详细信息被附加到键盘事件中。
例如，当用户按下键盘上的某个键时，他所在的应用程序会为开发人员引发一个事件。如果开发人员想处理该事件，他可以，如果他不想做任何事，他可以简单地让应用程序执行默认功能。HTML 文档中的示例输入字段就是这样，您可以只允许输入数字文本，您可以自己处理。但是，如果您想要一个简单的 textarea，它允许所有文本表示，那么您可以让应用程序自己处理。
触发事件的控件...
每个 HTML 元素都会触发与其在文档中的类型和功能相关的事件。当用户与每个元素交互时，您可以处理由每个元素触发的事件。您可以处理输入字段的更改事件，您可以处理窗口关闭事件等等。
但需要记住的是，每个元素只触发它能执行的事件。例如，change 事件只能由输入字段触发，而不能由任何其他仅包含文本的元素（如段落元素）触发。
处理键盘事件
JavaScript 事件是一个非常广泛的主题，无法在一篇文章中完全讨论，因为如果讨论，可能会丢失关于对象及其属性、事件和处理这些事件的方法的细节，或者不得不削减这些细节。
当用户按下按键时，会像上面讨论的那样触发事件。有许多事件用于处理引发的事件类型，您可以在 Mozilla Developer Network 的链接中了解 keyCode 和常量字段的基础知识。根据 Mozilla Developer Network 的说法，当用户按下按键时，会引发以下类型的事件：
keydownkeypresskeyup
开发人员可以轻松处理这些事件，并可以访问这些事件的详细信息来处理它们。
还应注意，如果按住按键不放，事件会重复发生，并且事件循环会开始，就像您使用无限循环设置的 while 循环一样，直到用户将手指从按钮上移开。
捕获键盘事件
您可以使用 JavaScript 捕获事件。无论是使用 HTML 标记，还是使用 JavaScript 事件监听器，简单的方法是在标记中包含一个简单的处理程序。就像下面的一个
<button id="myButton" onclick="handler();">Click me</button>
您也可以使用 JavaScript 中的事件处理程序来处理此事件。
// myButton is the ID of the button, upon click
myButton.addEventListener("click",
// run this function
function () {
// show an alert dialog box
alert("Button was clicked.");
}
);
这将运行并显示一个对话框。非常简单！如果您不想处理它，只需忽略它。应用程序会执行默认功能。
在这种情况下，使用 jQuery 是件简单的事情，因为您可以编写这一行代码来处理事件，
// upon click on button
$('#myButton').click(function () {
// alert the user.
alert('Button was clicked');
});
注意：jQuery 是 JavaScript 的一个库，所以 jQuery 可以做到的事情，JavaScript 一定可以做到。但 JavaScript 能做的事情，jQuery 可能做不到。所以认为 jQuery 是完美的解决方案并非明智之举。jQuery 仅在您要编写大量代码时才最理想，jQuery 可以帮助您最小化要编写的代码。
处理按键
如上所述，每个事件的详细信息都会被附加，以便开发人员可以轻松地通过逻辑操作级别来找到他们正在寻找的确切事件。例如，您可能想要处理使用 Enter 键触发的键盘事件，而不是其他按键。事件是相似的，但 Enter 的 keyCode 不同。这样，您就可以区分按键。
对于鼠标按键，情况也一样。您可以区分右键和左键。事实上，当鼠标中间的按键被单击时，JavaScript 也会附加详细信息。非常整洁和简单。
键盘按键处理
当用户按下 Enter 键时，会触发 keydown、keypress 事件，您不必处理所有这些事件，您可以只处理您感兴趣的一个。之后，您可以调用您想要触发的函数并继续。
每个按键都有一个独特的 keyCode 定义供用户使用，并执行相关的操作。Esc 键、Enter 键、Backspace 键等在系统上的结构都相同，它们都是按键，但它们的代码不同。Enter 键的代码是 13，因为它是最常用的键，我记住了。其余的，您可以在我包含在此项目中的示例中找到。所有按键都触发相同的函数。您可以在 Default.js 文件中找到该函数。它被声明为
// upon keydown on the website
$('body').keydown(function () {
// change the value inside the element with the keyCode for this event
$('#result').text(event.keyCode);
});
是的，我使用了 jQuery，因为我希望代码更短。JavaScript 也可以做到这一点。它适用于键盘上的所有按钮，但唯一不同的是被单击按钮的属性。每个按钮的唯一代码将显示在屏幕上。
事实上，您可以为事件添加一个条件，使其仅在按钮是您想要处理的那个时才触发。例如，如果用户按下 Enter，您可以调用函数来保存消息。就像 Facebook 处理评论和聊天消息一样。
// upon keydown on the website
$('body').keydown(function () {
// if enter key was pressed; enter button's key code is 13
if(event.keyCode == 13) {
// handle the action
}
});
这只会为 Enter 键触发，剩余的按键将由应用程序自行处理。这也可以作为单页应用程序的示例，您只需自己处理表单提交，而无需将数据从服务器/发送到服务器进行 POSTBACK 等。按下 ENTER 键后，您会调用一个函数来保存数据并更改 UI。
应用程序对 Enter 键事件的响应
在附加在此文章的应用程序中，该应用程序会与所有按下的按键进行交互，并返回它们的 keyCode，按下 Enter 键时显示 keyCode 的视觉效果如下。
所有按钮都有 keyCode。您可以尝试示例。
关注点
甚至窗口的 keyCode 也会显示和捕获，但您不能对其调用 prevent 方法。这是一个系统键，必须执行。
历史
- 2014 年 9 月 15 日：首次发布