JavaScript で矢印キーの押下を検出する
このチュートリアルでは、JavaScript でユーザーの入力をリッスンする特定の組み込み関数を使用して、ショートカットを作成し、ホットキーを設定する方法について説明します。この記事には、JavaScript のイベントと EventListeners の詳細な説明も含まれています。
イベントとは
このコーディングの観点では、私たちが実行する身体活動がイベントを引き起こします。これらのイベントは、プログラム実行の原動力です。グラフィカルユーザーインターフェイス（GUI）を使用する場合に役立ちます。
これらのショートカットとホットキーは、特定のイベントをリッスンし、この情報をハンドラーに渡してイベントを処理するイベントリスナープロシージャを使用して作成できます。
簡単に言うと、押されたキー（マウスまたはキーボード）を入力すると、これらのイベントを処理するイベントハンドラーを直接使用することもできます。両方のパラダイムを詳細に示します。
JavaScript で最も一般的な EventListeners は何ですか
JS には多くのイベントハンドラーがあり、これら 2つが最も一般的なものであり、それらの関数は次のとおりです。
keydown：キーを押すと登録され、押し続けると登録を続けますkeyup：キーを離すと登録されます
JavaScript のキーダウンイベントリスナー
.onkeydown イベントハンドラーは、目的のキーが押されるとすぐに特定の function() を実行するようにコンパイラーに指示します。alert("message") を配置することで、指定したメッセージを含むアラートボックスを表示できます。
以下のコードでは、押されたキーのラベルを返す .key と特定のキーのコードを返す .keyCode の 2つのイベントプロパティを使用しています。これらのキーコードは、各キーが特定の英数字値にマップされているため、ASCII に似ています。
この例では、関数パラメーターとして k を入力します。
document.onkeydown = function(e) {
alert(e.key + e.keyCode); // shows k75
};
特定のキーが押されるとすぐに、押されたキーがそのキーコードと連結されていることを示すアラートが表示されます。キーラベルとキーコードを使用すると、コードロジックの操作が簡単になり、イベント駆動型の操作で広く使用されます。
これらのパラメータをどのように活用できるかを示す例を見てみましょう。
document.onkeydown = function(e) {
switch (e.keyCode) {
case 37:
alert('left'); // show the message saying left"
break;
case 38:
alert('up'); // show the message saying up"
break;
case 39:
alert('right'); // show the message saying right"
break;
case 40:
alert('down'); // show the message saying down"
break;
}
};
ここでは、キーが押されたキーコードを受け取り、それがどのケースに属しているかを確認し、それを評価してメッセージを表示する単純なスイッチケースを使用します。左矢印キーを押したとしましょう。次に、left アラートなどが表示されます。
次の方法でイベントリスナーを定義することもできます。
document.addEventListener('keydown', function(event) {});
ここでは、別のパラダイムと、それが以前のアプローチとどのように異なるかを見ていきます。
document.addEventListener('keydown', function(event) {
if (event.key == 'ArrowLeft') {
alert('Left key'); // show the message saying Left key"
} else if (event.key == 'ArrowUp') {
alert('Up key'); // show the message saying Up key"
} else if (event.key == 'ArrowRight') {
alert('Right key'); // show the message saying Right key"
} else if (event.key == 'ArrowDown') {
alert('Down key'); // show the message saying Down key"
}
});
このコードは、前のコードと同じ出力を提供するようです。それでも、落とし穴があります。ここでは、キーコードを明示的に使用してロジックを操作する代わりに、下向き矢印や上向き矢印などのキーラベルを直接使用して比較し、目的のメッセージを表示します。
上矢印を押したとすると、if コードブロックは、関数から返されたキーラベルが指定されたキーラベルと一致するかどうかを確認します。含まれている場合、そのブロックが実行され、メッセージが表示されます。
これで、覚えやすいニーモニックキーラベルを覚えることができれば、各キーのキーコードを覚える必要がなくなります。これは、キーコードがわからず、ロジックに手を出す場合に非常に便利です。