探究keyup和keydown事件

一、介紹

在前端開發中，代碼執行通常與用戶操作有關。用戶操作中，常用的是鍵盤事件，其中keydown和keyup事件是最為常見的兩種。這兩種事件都可以用來監測用戶按鍵，但它們有不同的觸發時機和執行效果。接下來將詳細介紹這兩種事件。

二、keydown事件

keydown事件在用戶按下鍵盤上任何一個鍵之後觸發，其效果為向操作系統重複持續發送按下鍵盤的命令。也就是說，當用戶長按某一個鍵時，這個事件會不停地執行，直到該鍵抬起。下面是一個簡單的代碼示例：

document.addEventListener('keydown', function(event) {
  console.log('按下了鍵' + event.key)
})

上述代碼將會在鍵盤上的任何鍵被按下時，將事件信息輸出到控制台上。

三、keyup事件

keyup事件在用戶釋放鍵盤上任何一個鍵之後觸發，其效果為向操作系統發送釋放鍵盤的命令。也就是說，當用戶釋放某一個鍵時，這個事件只會執行一次。下面是一個簡單的代碼示例：

document.addEventListener('keyup', function(event) {
  console.log('鬆開了鍵' + event.key)
})

上述代碼將會在鍵盤上的任何鍵被釋放時，將事件信息輸出到控制台上。

四、keydown和keyup的區別

從上述代碼示例中我們可以看出，keydown和keyup的差別在於事件觸發的時機和執行次數。為了更好地理解這兩種事件的差異，我們可以在代碼中添加一些具體的應用場景來說明。

例如，在一個表單中，用戶需要輸入一段文本，假設這段文本只能含有數字和字母，其他的字符是無效的。下面是一段利用keydown事件的代碼：

const input = document.querySelector('input');

input.addEventListener('keydown', function(event) {
  const code = event.keyCode;

  if ((code  57) && // 不是數字
      (code  90) && // 不是大寫字母
      (code  122)) {// 不是小寫字母
    event.preventDefault();
  }
});

上述代碼將會在用戶按下任何除了數字和字母以外的鍵時，阻止默認的按鍵行為。這種情況下，由於keydown事件會不斷地重複執行，如果不添加這個if判斷，這個文本框會被禁止使用。

再舉一個相反的情況，假設需要用戶在窗口中控制小球的位置，利用鍵盤上的”上””下””左””右”鍵。下面是一段利用keyup事件的代碼：

let position = {
  x: 0,
  y: 0
};

document.addEventListener('keyup', function(event) {
  switch(event.keyCode) {
    case 37:
      position.x -= 10; // 左移
      break;
    case 38:
      position.y -= 10; // 上移
      break;
    case 39:
      position.x += 10; // 右移
      break;
    case 40:
      position.y += 10; // 下移
      break;
  }

  document.querySelector('.ball').style.transform = 'translate(' 
    + position.x + 'px,' + position.y + 'px)';
});

上述代碼將會在用戶按下”上””下””左””右”鍵時，通過修改小球的位置實現控制。由於keyup事件只會觸發一次，這段代碼不會出現小球不受控制的情況。

五、總結

以上就是keydown和keyup事件的介紹及應用。無論是在輸入文本還是控制遊戲中，我們都可以通過這兩種事件來實現對鍵盤的監控和響應。在應用過程中，要充分認識它們的差異和應用場景，使得開發的效果更加精準和流暢。