「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}を押したな！？`)
}
