keyup, keypress, keydownとは?Javascript超初心者の勉強

「keyup」と「keydown」などでググってもそんなに出てこないのであまり使わないのかな?と思いましたが、vue.js勉強中に講師の方がさらっと言っていたので言葉としては理解しておいて損はなさそうなので調べてみました。

keyup, keypress, keydownとは?

keyup, keypress, keydownはまとめてキーボードイベント(KeyboardEvent)と呼ばれたりします。略してキーイベントと言っている人もいるようです。奥が深そう
参考サイト:https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent

キーボードイベントと呼ばれるようにキーボードを押した時、離したときにイベントを発生させる時に使用されます。

keydownキーが最初に押された時
keypressキーが修飾キーでなかった場合
keyupキーから指を離した時点

キーボードイベントを実際に使ってみる。

JSBinやcodepenなどのサイトまたは about:blank画面などで実験してみてください。

書き方 (構文)

document.addEventListener( 'キーイベント', 関数名);

キーイベントが発生すると関数が呼ばれます。

サンプル 動作確認

document.addEventListener('keydown', keyevent);

function keyevent(){

alert("何かタイプしたな!?");

}

keydownの箇所をkeyupやkeypressに変えてみると動きがわかると思います。

サンプル キーを取得

押したキーの値をalertで表示させます。

document.addEventListener('keypress', keyevent);
function keyevent(){
const keyName = event.key;
alert(`${keyName}を押したな!?`)
}