JavaScript, jQuery, keyevent での Escape キー検出

JavaScript

document.addEventListener('keydown', function(event) {
  if (event.keyCode === 27) {
    // Escapeキーが押された時の処理
    console.log('Escape key pressed!');
  }
});

jQuery

$(document).keydown(function(event) {
  if (event.keyCode === 27) {
    // Escapeキーが押された時の処理
    console.log('Escape key pressed!');
  }
});

解説

• document.addEventListener または $(document).keydown: ドキュメントにキーダウンイベントのリスナーを登録します。
• event: キーボードイベントのオブジェクトです。
• event.keyCode: 押されたキーのコード番号です。Escapeキーのコード番号は 27 です。
• if (event.keyCode === 27): 押されたキーがEscapeキーかどうかをチェックします。
• console.log('Escape key pressed!'): Escapeキーが押されたときの処理（ここでは、コンソールにメッセージを出力しています）。

重要なポイント

• コード番号: 各キーには固有のコード番号があります。Escapeキーのコード番号は27です。
• イベントオブジェクト: eventオブジェクトには、押されたキーの情報が含まれています。
• 複数のキー検出: 複数のキーを検出する場合は、複数の条件文を使用するか、キーコードの配列と比較します。

Escapeキー検出のJavaScript解説

document.addEventListener('keydown', function(event) {
  if (event.keyCode === 27) {
    // Escapeキーが押された時の処理
    console.log('Escape key pressed!');
  }
});

• document.addEventListener: ドキュメントにキーダウンイベントのリスナーを登録します。

event.key プロパティの使用

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    // Escapeキーが押された時の処理
    console.log('Escape key pressed!');
  }
});

• event.key: 押されたキーの文字列表現です。Escapeキーの場合は "Escape" になります。

document.addEventListener('keydown', function(event) {
  if (event.which === 27) {
    // Escapeキーが押された時の処理
    console.log('Escape key pressed!');
  }
});

jQueryの keyup イベント

$(document).keyup(function(event) {
  if (event.keyCode === 27) {
    // Escapeキーが押された時の処理
    console.log('Escape key pressed!');
  }
});

• keyup: キーが離されたときに発生するイベントです。

キーコードの配列との比較

const escapeKeyCode = 27;
const escapeKeyString = 'Escape';

document.addEventListener('keydown', function(event) {
  if (event.keyCode === escapeKeyCode || event.key === escapeKeyString) {
    // Escapeキーが押された時の処理
    console.log('Escape key pressed!');
  }
});

• キーコードまたはキー文字列を配列に保存し、比較することで、複数のキーを同時に検出できます。