詳解keyup和keydown事件

一、key和keys的區別

鍵盤事件中經常會出現key和keys這兩個術語，它們之間的區別是：key表示按下的是哪個鍵，而keys表示同時按下的多個鍵的組合情況。

例如：

// 鍵盤事件中獲取到按下的鍵值
document.addEventListener('keydown', function(event) {
  console.log(event.key);
});

// 鍵盤事件中獲取到同時按下的鍵值組合
document.addEventListener('keydown', function(event) {
  console.log(event.keys);
});

以上代碼中，在keydown事件中，通過監聽event.key可以獲取到按下的具體鍵值，同時監聽event.keys可以獲取到當前按下的多個鍵值組合（當按下shift、ctrl、alt、meta鍵時）。

二、keydown是什麼事件

keydown事件在按下鍵盤上的任意一個鍵時觸發，常用於實現在輸入框中監聽按鍵輸入的操作。

例如：

var input = document.querySelector('input');
input.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') { // 當按下Enter鍵時
    console.log('你按下了Enter鍵');
  }
});

以上代碼中，在監聽輸入框的keydown事件時，判斷按下的鍵值是否為Enter，從而實現相應的操作。

三、keyone和key2區別

keyone和key2並不是鍵盤事件中的術語，這裡假設指的是在鍵盤事件中的key和keyCode這兩個屬性。

key是事件屬性，表示按下的是哪個鍵，keyCode是事件屬性，表示按下的是哪個鍵的鍵碼值。

例如：

var input = document.querySelector('input');
input.addEventListener('keydown', function(event) {
  console.log(event.key); // 按下的鍵
  console.log(event.keyCode); // 按下的鍵的keyCode
});

以上代碼中，通過監聽輸入框的keydown事件，分別通過event.key和event.keyCode來獲取到按下的鍵和鍵碼值。

四、輸入框中獲取按鍵輸入

在輸入框中獲取按鍵輸入的功能在實際開發中非常常見，它可以通過監聽輸入框的keydown或keyup事件來實現。

例如：

var input = document.querySelector('input');
input.addEventListener('keyup', function(event) {
  console.log(input.value); // 獲取輸入框中的值
});

以上代碼中，在監聽輸入框的keyup事件時，通過input.value來獲取輸入框中的值，從而實現獲取按鍵輸入的操作。

五、阻止默認事件

在一些情況下，我們需要阻止默認的鍵盤事件，例如阻止按下Backspace鍵時瀏覽器自動返回歷史記錄。

可以通過event.preventDefault()來阻止事件的默認行為。

例如：

document.addEventListener('keydown', function(event) {
  if (event.key === 'Backspace') {
    event.preventDefault();
  }
});

以上代碼中，在監聽document的keydown事件時，判斷按下的鍵是否為Backspace，如果是則通過event.preventDefault()阻止瀏覽器自動返回歷史記錄。

六、總結

keyup和keydown是常用的鍵盤事件，它們分別在釋放按鍵和按下按鍵時觸發，常用於實現輸入框的輸入、阻止默認鍵盤事件等功能。

在使用鍵盤事件時，需要注意key和keyCode、key和keys之間的區別，根據具體的需求選擇相應的事件和屬性。