【忘備録】escキーのイベント

概要

JavaScriptでescキーが押下された時にイベントが発火するように作っていきます。

作り方

コード

document.addEventListener('keydown', function(e) {
  if(e.key === 'Escape'){
    "ここにescキーを押した時の処理を書く"
  }
})

この記述で作れるはずです。

解説

document.addEventListener

→ そのサイト全てでescキーを押下した際に、記述した処理が実行される

'keydown'

→ キーが押下された際すぐにイベントが発行する
その他のキーイベント👇

• keyup: キーが離された時に発行する
• keypress: 【❗️非推奨❗️機能削除の可能性あり】文字値を生成するキー（アルファベットキー、数字キー、区切り記号キー）が押下された時に発行する

if(e.key === 'Escape')

→ 押下したキーがescキーだった時

検証：　if(e.key === 'Escape')この記述でescキーを指定できるのか！？

document.addEventListener('keydown', function (e) {
　　console.log(e.key);
}

• 👆をscript.js（等テキトーなJSファイル）に記述し、テキトーなHTMLファイルをブラウザで開きます。
• デベロッパーツールを開き、ブラウザ上でescキーを押してみてください。
• コンソールにEscapeという文字列が出てくるはずです。
  （他のキーでも同様です）

結果

if(e.key === 'Escape')　という記述でescキーを指定できる

まとめ

初投稿でした！もっとわかりやすい記事を書けるように頑張ります！