PANDA

【JavaScript】 イベントオブジェクトとは？

Created: 2025/11/21

はじめに

歌舞伎町のイベントに展示するゲームを作っていた時に、疑問に思ったことを書こうかなーって思います！

今回は、　　

  1. イベントオブジェクトとは？
  2. 実際に使ってみた
  3. まとめ

という流れで進めていきます！

イベントオブジェクトとは？

イベントオブジェクトとは、イベントが発生した時に、イベントの詳細な内容を格納している、オブジェクトです。

イベントオブジェクトに含まれている情報には、

  • type：イベントの種類（例：'click'、　'keydown'）
  • target：イベントが発生した要素
  • clientX、** clientY**：マウスカーソルの画面上のX、Y座標
  • timeStamp：イベントが発生した時刻（ミリ秒）

など、たくさんの情報が入っています。

これが、簡単なイベントオブジェクトの概要です。

（イベントオブジェクトに含まれている情報が多いなって思ったので、そのことについて今度記事書くかも...）

実際に使ってみた

ここからは、キャラクターを矢印キーで動くようにします。

キーの状態を管理する変数を用意する

矢印キーで操作するためには、キーが押されているのか、押されていないのかをチェックしないといけません。

なので、上下左右それぞれのキーの状態を管理する変数を用意します。

js 
1
2
3
4

let player_up = false;
let player_down = false;
let player_left = false;
let player_right = false;

それぞれのキーが押されたときの処理を追加

キーが押されたときに実行する関数を定義します。

ここで、イベントオブジェクトのe.keyという情報を使います。

js 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

function keyDownHandler(e) {
    if (e.key === 'ArrowUp'){
        player_up = true;
    }
    else if(e.key === 'ArrowDown'){
        player_down = true;
    }
    else if(e.key === 'ArrowLeft'){
        player_left = true;
    }
    else if(e.key === 'ArrowRight'){
        player_right = true;
    }
}

※補足
ここで使われているeは、今回の主役「イベントオブジェクト」です。
でも、イベントオブジェクトを使う場合、絶対にeを使わないといけないわけじゃありません。
例えば、「hogehoge」でも動きます。
ここでは、1番よく使われるeを使って進めていきます。

それぞれのキーが離されたときの処理を追加

ゲームの操作は、キーを押している間だけ動いて、キーを離したら止まる必要があります。

なので、キーが離されたときに実行する関数を定義します。

ここでも、キーが押されたときと同じようにイベントオブジェクトのe.keyという情報を使います。

js 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

function keyUpHandler(e) {
    if (e.key === 'ArrowUp'){
        player_up = false;
    }
    else if(e.key === 'ArrowDown'){
        player_down = false;
    }
    else if(e.key === 'ArrowLeft'){
        player_left = false;
    }
    else if(e.key === 'ArrowRight'){
        player_right = false;
    }
}

イベントリスナーを登録

処理の関数（イベントハンドラー）を作っただけでは動かないので、最後にイベントリスナーを追加して完成です。

js 
1
2

document.addEventListener('keydown', keyDownHandler);
document.addEventListener('keyup', keyUpHandler);

これで、キーの状態を管理することができました！

あとは、ゲームループの中でこれらのフラグを見てキャラクターの位置を更新する処理があれば、キャラクターが矢印キーで動きます！

まとめ

今回は、イベントオブジェクトについて調べて、実際にキャラを動かすコードを作ってみました。

調べたり、実際に使ってみて思ったことは、最強です！

他にもイベントオブジェクトを使って、いろいろ作っていこうと思います！