如何在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+ 次檢視

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告