如何在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文档的body元素。然后，我们在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日

6000+ 次浏览

启动你的职业生涯

完成课程获得认证

开始学习
广告