JavaScript addEventListenerメソッドの使い方【keyupイベント編】

JavaScript

2022.01.23

addEventListenerメソッドで “keyup” を指定すると、キーが離されたときに発生するイベントを設定することができる。

■構文

target.addEventListener(type, listener [, options]);

インスタンス – target: EventTargetオブジェクト (Window, Document, Element, etc.)
第1引数 – type: イベントの種類を表す文字列 (keyup, click, change, etc.)
第2引数 – listener: EventListenerインタフェースを実装するオブジェクト、または関数
戻り値 – undefined

■サンプルプログラム概要

ブラウザ上で入力されたキーを出力する。

window.addEventListener('keyup', function(e) {
    console.log(`入力されたキーは '${e.key}' です。`);
});

■出力結果

( “keyup” と入力された場合 )
入力されたキーは ‘k’ です。
入力されたキーは ‘e’ です。
入力されたキーは ‘y’ です。
入力されたキーは ‘u’ です。
入力されたキーは ‘p’ です。