JavaScriptでキーボード操作によるイベントハンドラ

はじめに

こんにちはプログラマー2年目の塚田と申します。
今回はJavaScriptでキーボード操作によるイベントハンドラについて触れる機会があったので記事にしてみます。

キーイベントについて

JavaScriptで使えるキーイベントは主に以下のような種類があります。
・keydown　-> キーが押されたとき
・keyup　　-> キーを話したとき
・keypress　-> 文字を入力可能なキーを押したとき

文字列指定によるハンドリング

event.keyプロパティを使用することでキーそのものの文字列を指定することができます。
以下の例は"Enterキー"を押したときに発火するイベントです。
まずEventListenerを使い、特定のキー押下時のイベントをキャッチします。その中にif分でevent.keyプロパティから"Enter"を指定し、押された時の処理を記述します。

document.addEventLister('keydown',function(event){
    if(event.key === 'Enter'){
        //ここに処理を記述する
    }
})

このように記述することで文字列指定によるハンドリングが可能となります。

キーコードを利用するハンドリング

こちらは上記のやり方とは違い、キーコードを使用してのハンドリングになります。
キーコードとはキーボードの各キーに割り当てられた数値の事です。
この数値を指定することで特定のキーのハンドリングが可能となります。
同じように"Enterキー"を押したときに発火するイベントを拾います。

document.addEventLister('keydown',function(event){
    if(event.keyCode === 13){
        //ここに処理を記述する
    }
})

書き方はほぼ文字列指定と変わりありませんが、
今回はevent.keyCodeプロパティを使用しています。
event.keyCode === 13　 ->　このように記述することで、
キーコード13の"Enterキー"を指定することが可能になります。

おわりに

今回は「JavaScriptでキーボード操作によるイベントハンドラ」についてでした。皆さんも触る機会がありましたら是非参考にしていただけると幸いです。

以上、塚田でした。