如何在JavaScript中模拟按键事件？

我们使用事件处理程序在JavaScript中模拟按键事件。JavaScript中的事件，顾名思义，指的是浏览器或用户采取的行动。事件处理程序是JavaScript提供的一个实用程序，允许程序员对这些事件做出正确的响应。

我们将使用jQuery库在JavaScript中模拟按键事件。它是一个JavaScript库，用于遍历HTML文档以及操作它们、创建动画等等。其中一个我们将使用的功能是事件处理。

事件

事件是在浏览器或系统中发生的更改。鼠标点击被评估为系统中的更改，因此它被记录为事件。其他事件的例子包括键盘上按下的键、表单加载以及网页完成加载。

主要有四种类型的事件，每种事件都与不同的事件输入源相关。它们是鼠标事件、键盘事件、文档事件和表单事件。

示例

  • 鼠标事件 - click, dblclick
  • 键盘事件 - keypress, keyup
  • 文档事件 - load, resize
  • 表单事件 – submit, change

现在，通过将事件处理程序附加到HTML文档的相关元素，将此事件的信息传递给程序员。

语法

我们在jQuery中使用选择器将事件处理程序附加到不同的HTML标签、类和ID。选择器是jQuery框架的一部分，它使导航和操作HTML文档变得容易。

$(selector).keypress(function)

其中selector可以是类、ID或标签。此行将按键处理程序附加到提供选择器。

这种使用选择器模式引用文档中各种HTML元素的模式是jQuery的常见功能。我们将使用它来引用脚本的其他部分，但由于jQuery增加了抽象层，因此与JavaScript的方式有所不同。

示例1

这里我们将处理HTML文档主体上的按键事件。每当在浏览器窗口中按下按键时，它都会在屏幕上记录。

在附加事件处理程序之前，我们首先检查DOM（文档对象模型）是否已准备好。这是借助jQuery(document).ready()函数完成的。当达到就绪状态时，作为ready()内部参数提供的代码块将运行。在这里，我们将提供一个将事件处理程序附加到HTML文档主体的函数。

让我们看看相应的代码。

<html>
<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
   </script>
   <script>
      
      // checks for the readiness of the DOM
      jQuery(document).ready(function($) {
      
         // attaches a keypress handler to body
         $("body").keypress(function() {
            document.getElementById("result").innerHTML = "Key Pressed";
         });
      });
   </script>
</head>
<body>
   <div id = "result">
      press any key
   </div>
</body>
</html>

在上面的代码中，我们使用jQuery的选择器模式引用HTML文档的主体，并向其附加按键处理程序。

我们甚至可以捕获已按下的键盘按键并在屏幕上记录。

在屏幕上记录按键

示例2

在下面的代码中，我们首先将按键处理程序附加到HTML文档的主体元素。然后，我们在jQuery中创建一个函数，该函数触发按键事件并采用默认字符作为参数。在这种情况下，字符为“Z”。

然后，我们将使用setTimeout方法在每3秒后调用此函数，该函数在屏幕上记录“Z”键。

这里需要注意的一件有趣的事情是，按键处理程序附加到文档的主体，因此用户端的任何按键也将记录在屏幕上。

<html>
<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
   </script>
   <script>
      jQuery(document).ready(function($) {
         $("body").keypress(function(e) {
            // logs the pressed key on the screen
            document.getElementById("result").innerHTML = String.fromCharCode( e.which ) + " key has been pressed.";
         });
      });
      
      // function to trigger the keypress
      jQuery.fn.simulateKeyPress = function(character) {
         jQuery(this).trigger({
            type: 'keypress',
            which: character.charCodeAt(0)
         });
      };
      
      // calls the simulateKeypress function every 3 second
      setTimeout(function() {
         $("body").simulateKeyPress('Z');
      }, 3000);
   </script>
</head>
<body>
   <div id = "result">Wait for the simulation to begin !</div>
   <p> Press any key </p>
</body>
</html>

结论

JavaScript中的事件使我们的程序员生活更加轻松。它们为我们提供了处理系统中发生的各种事件的正确工具。

更新于：2022年9月21日

7000+ 次查看

启动您的职业生涯

完成课程获得认证

开始学习
广告