この記事では、JavaScriptのaddEventListener()でキーを押した時に処理を発生させる方法について見ていきたいと思います。
addEventListener()とは
addEventListener()は、指定したイベントが発生した際に指定した処理を発動させることのできるメソッドです。
addEventListener()の書き方
対象.addEventListener(イベント名, 処理)
※「対象」には、document・HTML要素などを指定します。
documentは、ブラウザに読み込まれたwebページを意味します。
※「処理」は、関数で指定します。
キーを押した時に処理を発生させる方法
書き方
document.addEventListener(“keydown”, 処理)
例
・HTML
<p id="message"></p>・JavaScript
let message = document.getElementById("message");
document.addEventListener("keydown", e => {
message.textContent = "「" + e.key + "」" + "キーが押されました。";
});この例では、キーが押されると押したキーの値がページに表示されるようになっています。
また、addEventListener()のeには押したキーに関する情報が格納されていて、e.keyを指定すると入力したキーの値を返すことができます。
なお、ここで用いているgetElementById()については以下の記事を参照していただくことができます。
JavaScriptのgetElementById()の使い方
では実際にキーを入力してみましょう。
キーを入力して下さい。
ここで、いずれかのキーを入力するとそのキーの値が出力されているはずです。
まとめ
このように、addEventListener()のイベントに「keydown」を指定することで、
キーを押した際に指定した処理を発動させることができます。
コメント