先生と生徒の会話形式で理解しよう

生徒

「先生、ボタンをクリックしたときに『どのボタンが押されたか』とか『マウスの位置』を知りたいです。どうすればできますか？」

先生

「それなら、eventオブジェクトを使います。イベントオブジェクトは、ユーザーが操作したときの情報をJavaScriptで受け取れる特別なデータです。」

生徒

「特別なデータって、具体的にどんな情報が入っているんですか？」

先生

「クリックされた要素やマウスの座標、押されたキーの情報など、操作に関するいろいろな情報が含まれています。では、基本的な使い方を見ていきましょう！」

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

イベントオブジェクトとは、ユーザーの操作に関する情報をまとめた特別なオブジェクトです。例えば、クリックやキー入力などのイベントが発生したときに自動的に作られ、イベントハンドラー関数に渡されます。

このオブジェクトを使うと、どの要素が操作されたか、どのキーが押されたか、マウスの位置はどこかなど、詳細な情報を取得できます。

2. 基本的な使い方

イベントオブジェクトは、イベントハンドラーの関数の引数として受け取ります。例えばボタンをクリックしたときに、クリックした要素のIDを取得する場合は次のように書きます。


const button = document.getElementById("myButton");

button.addEventListener("click", function(event) {
  console.log("クリックされた要素のID:", event.target.id);
});

ここでevent.targetは、クリックされた具体的な要素を指します。

3. よく使うプロパティ

イベントオブジェクトには多くのプロパティがありますが、初心者がよく使うのは次の通りです。

event.target：操作された要素を取得
event.type：発生したイベントの種類を取得
event.clientX / event.clientY：マウスの座標（ブラウザ表示領域基準）
event.key：押されたキーの文字

4. マウスイベントの例

マウスの座標を取得して表示する例です。


document.addEventListener("click", function(event) {
  console.log("マウス座標 X:", event.clientX, "Y:", event.clientY);
});

クリックした位置のX座標とY座標がコンソールに表示されます。マウスイベントではclientXとclientYを使うことが多いです。

5. キーボードイベントの例

押されたキーの文字を取得する例です。


document.addEventListener("keydown", function(event) {
  console.log("押されたキー:", event.key);
});

キーを押すたびに、押された文字がコンソールに表示されます。キー入力を監視する際に便利です。

6. フォーム入力での活用

入力欄の値が変更されたときに、イベントオブジェクトを使って入力値を取得できます。


const input = document.getElementById("myInput");

input.addEventListener("input", function(event) {
  console.log("入力値:", event.target.value);
});

これで、文字を入力するたびに最新の値を取得でき、リアルタイムで処理が可能です。

7. イベントオブジェクトを使うメリット

イベントオブジェクトを使うと、次のようなメリットがあります。

どの要素が操作されたか簡単に特定できる
マウス座標や押されたキーなど、詳細な情報を取得できる
複数の要素に同じ関数を使う場合も、どの要素で発生したか判断できる

初心者の方は、まずマウスやキーボードの簡単な例から試すと理解しやすいです。

8. 練習のすすめ

ボタンをクリックして要素のIDを取得したり、マウスの位置を表示したり、キー入力を表示したりして、イベントオブジェクトの基本操作を体験してみましょう。手を動かすことで、イベントオブジェクトの仕組みが自然に身につきます。

JavaScriptのイベントオブジェクトの活用例とよく使うプロパティ