JavaScript:掌握键盘事件处理

网站开发者希望读者以某种方式与他们的网站互动。访问者可以上下滚动页面，在输入栏中书写，单击链接访问另一个页面，或者按组合键触发特定行为。作为开发人员，您应该能够捕获所有这些事件并为用户提供所需的功能。

在本教程中，我们将专注于处理JavaScript中的键盘事件。我们将了解不同类型的键盘事件，处理特殊的按键事件，并获取有关按键按下或释放的信息。

键盘事件类型键盘事件分为三种类型。这些被称为按键、按键和击键。

只要按下一个键，就会触发keydown事件。所有按键都将被触发。他们是否产生角色价值并不重要。例如，按下键盘上的A或Alt键将触发keydown事件。

按键事件已被否决。它只有在产生字符值的键被按下时才会触发。例如，按A键将触发此事件，但按Alt键不会。您应该考虑改用keydown事件。

当用户按下的键被释放时，将触发keyup事件。

假设用户连续按下键盘上的任意键。在这种情况下，keydown事件将被重复触发。一旦用户释放按键，就会触发keyup事件。

监控键盘事件在这一点上，我想提一点非常明显的事情。键盘是一种输入设备，用于从用户那里获得一些输入。我们根据这个输入采取行动。但是，用户也可以通过其他方式发送输入。

如果您想跟踪用户在表单中填写的任何输入字段，在输入中使用其他事件（如change）更有意义。

此外，键盘事件仅针对可以获得焦点的元素生成。这包括

例如，除非设置了tabindex或contentEditable属性，否则将无法侦听段落元素上的键盘事件。但是，它最终会在DOM树中冒泡，因此您仍然可以将keydown或keyup事件侦听器附加到文档。

这是一个例子:

document . addevent listener（& quot；keydown&quot，keyIsDown）；function keyIsDown（event）{//为所欲为！}您还可以提供箭头函数形式的回调:

document . addevent listener（& quot；keydown&quot，（事件）= & gt{ //为所欲为！});从基本代码片段中的键盘事件获取信息在上一节中，我们定义了一个回调函数。这个函数接受一个事件对象作为它的参数。该事件对象包含您可能需要访问的与keydown或keyup事件相关的所有信息。

这里有一些你应该知道的有用属性:

Key:该属性返回一个字符串，表示所按下的键的字符值。Code:该属性返回一个字符串，表示所按物理键的代码。重复:如果长时间按住某个键，该属性将返回布尔值true，从而导致keydown事件多次触发。AltKey:如果用户在触发keydown事件时按下Alt键（在Windows上）或Option键（在macOS上）。CtrlKey:如果用户在keydown事件被触发时按下控制键，则该属性返回布尔值true。MetaKey:如果用户在keydown事件被触发时按下meta键，则该属性返回布尔值true。ShiftKey:如果用户在keydown事件被触发时按下Shift键，则该属性返回布尔值true。您会注意到我在所有最后四个属性描述中都包含了“当keydown事件被触发时”一节。这意味着，如果您在执行上述任何操作时按下A或3等键，则这些属性的值对于keydown事件将为真。键也被按下。

在关注以下CodePen演示后，尝试按一个键或组合键来查看不同属性的值的变化。

如果您按下键盘顶部的3键而不是Shift键，则key属性的值将变为3》而code属性的值将变为Digit3。但是，在按下Shift后，key属性的值将更改为#，而code属性将保持Digit3。

您可以尝试对其他组合键进行相同的操作，您会注意到key属性的值会根据您按下的键而变化。但是，code属性的值保持不变。

键盘上的一些键通常是重复的。例如，有两个换档键。左击会将代码值设置为ShiftLeft。按下右键会将代码值设置为ShiftRight。同样，也有两组数字键。字母上方的代码将为您提供数字&lt

这意味着如果您的代码依赖于检测特定的键，请确保使用code属性来检查按下了哪个键。

我想提的另一件重要的事情是，不是每个人都使用QWERTY键盘，他们的键盘甚至可能不是英文的。在这种情况下，使用key属性检查按下了哪个键很容易出错。

响应键盘事件现在我们知道了如何侦听键盘事件并从中提取信息，我们可以编写一些代码来响应某些键的keydown和keyup事件。考虑以下代码片段:

const circle = document . query selector（& quot；。圆圈& quot);document . addevent listener（& quot；keydown&quot，（事件）= & gt{ if（event . code = = & quot；KeyR & quot& amp& amp事件。重复！= true）{ let rVal = math . floor（20小编math . random（）* 200）；circle . set attribute（& quot；风格& quot，` width:$ { rVal } px；高度:$ { rVal } px`);} if（event . key = = & quot；B& quot；& amp& ampevent . shift key = = true）{ let rVal = math . floor（1小编math . random（）* 40）；circle . set attribute（& quot；风格& quot，` border: ${rVal}px实心橙色；`);} if（event . code = = & quot；向上箭头& quot& amp& amp事件。重复！= true）{ circle . class list . add（& quot；animate _ _ animated & quot，& quot动画_ _ bounce & quot);}});document . addevent listener（& quot；keyup & quot，（事件）= & gt{ if（event . code = = & quot；向上箭头& quot）{ setTimeout（（）= & gt；{ circle . class list . remove（& quot；animate _ _ animated & quot，& quot动画_ _ bounce & quot);}, 4000);}});我们为keydown事件创建了一个侦听器，为keyup事件创建了另一个侦听器。这两个事件都附加到文档中。

在keydown中，我们检查三个不同的键。我使用R键的event.code属性向您展示了您可以单独按下R键或与任何修饰键结合使用，它仍然会将圆的半径更改为随机值。另一方面，我们使用event.key属性检查其值是否为B .此块中的代码只有在同时按下Shift和B时才会执行，因为这种组合将导致event.key属性变成大写的“B”。

在keyup中，我们检查ArrowUp键上的keyup事件。一旦释放该键，我们将在四秒钟的延迟后删除先前附加的类。

下面的CodePen演示展示了所有这一切的实际效果:

您应该尝试在上面的代码中添加自己的逻辑，这样当用户按下A、S和w键时，圆圈将移动》和d。

最后的想法在本教程中，我们学习了JavaScript中键盘事件的基础知识。按下和释放键盘上的键将分别触发keydown和keyup事件。与这些事件相关联的事件对象包含您需要的所有信息，以确定按下了哪个键并采取适当的操作。

请记住，键盘只是许多可能的输入设备之一。因此，使用键盘检测任何输入可能并不总是能达到预期的效果。在这种情况下，您应该考虑使用与输入相关的事件。

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：JavaScript:掌握键盘事件处理 https://zhujicankao.com/109614.html