イベントオブジェクト・キーボードイベント

イベントオブジェクト・・・

イベントが発生し、イベントハンドラやイベントリスナーが呼び出されると、イベントオブジェクトというものが渡されます。

イベントオブジェクトには、イベントの詳細情報が保管されており、マウスの座標はどこにあるのか、どのキーが押されたのかなどもあります。

実際にイベントオブジェクトを確認してみましょう。

HTML側でボタンを作成しておきます。

・jsファイル

document.querySelector('button')
 　　　　　　　　　　　　　　.addEventListener('click', function (evt) {
 　　　　　　　　　　　　　　　console.log(evt);
});

書き方としてはfunction内の第一引数に「evt」や「event」、「e」と記述します。

コンソールで確認すると、「PointerEvent 」というものが渡されています。これはイベントオブジェクトの一種です。

PointerEvent のイベントプロパティの紹介（一部）

・pointerId・・・マウス・タッチ・ペンのポインターを区別するid

・width・・・指など接触している範囲の幅、単位はピクセル

・height・・・指など接触している範囲の高さ、単位はピクセル

・pointerType ・・・ポインターの種類を表します。マウスなら “mouse”など

pointerdown イベントの紹介（一部）

・pointerdown・・・マウスボタンが押下されたとき

・pointerup・・・ウスボタンが離されたとき

・pointerout・・・ポインターが要素の外に出たとき。

・pointerover・・・ポインターが要素の中に入ってきたとき。

などが挙げられます。

そしてタイトルの「キーボードイベント」では「イベントオブジェクト」を使っていく必要があります。

キーボードイベント・・・

特定のキーが押されたらメッセージを表示したり、あるいはどのキーが押されたか確認したい時などにキーボードイベントを活用します。

「keydown」はキーが押された時に発生するイベント

「keyup」は押されていたキーが離された時に発生するイベント

となります。

サンプルを見てみます。

・jsファイル

const input = document.querySelector('input');
input.addEventListener('keydown', function () {
 console.log('keydown');
});
input.addEventListener('keyup', function () {
 console.log('keyup');
});

テキストフィールドの中で適当な文字を入力してみると、keydown → keyupの順で出力されます。キーボードが押された時に発火するイベントとなっています。

そして使用する際は、どのキーが押されたか知りたい時に使うことが多くなってきます。

その確認の仕方が上記の「イベントオブジェクト」となります。

・key：押されたキーを表す文字を取得

・code：押されたキーを取得

上記の2つのプロパティにアクセスすると、キー情報を文字列で取得することができます。

const input = document.querySelector('input');
input.addEventListener('keydown', function (e) {
 console.log(`key: ${e.key}`);
 console.log(`code: ${e.code}`);
})