JavaScript

JavaScript - イベントオブジェクト - function(e) の e とは？

function(e) の e はイベントオブジェクトを受け取るための変数です。イベントオブジェクトにアクセスして、押されたキーの種類やマウスポインターの座標などの情報を取得できるようになりましょう。

Pyxofy

Oct 22, 2023 • 6 min read

function(e) の e とは？

JavaScript コードで、e が使われているのを見たことはありますか？たとえば下のコードでは、changeColor(e) や e.target で e が使われていますね。

// イベントハンドラー
function changeColor(e) {
  let randomColor = '#' + (Math.floor(Math.random() * 16777215).toString(16));
  e.target.style.backgroundColor = randomColor;
}

この e は、イベントオブジェクトを表しています。イベントハンドラー関数にイベントオブジェクトを引数として渡すと、発生したイベントに関する情報を利用できるようになります。

今回は、function(e) を使った簡単なコードを例にしながら、イベントオブジェクトについて解説していきます。

JavaScript のオブジェクトについては、以下の記事をご覧ください。

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

イベントオブジェクトは、発生したイベントの詳細情報を持つオブジェクトです。イベントオブジェクトは引数としてイベントハンドラーに渡されます。

イベントとは、「ボタンがクリックされた」「キーボードのキーが押された」など、ウェブページで起こる出来事のことですね。イベントハンドラーは、イベントが発生したときに実行される関数です。

イベントやイベントハンドラーについては、こちらの記事を参考にしてください。

e は event の省略形

イベントハンドラーの e は、イベントオブジェクトを受け取るためのパラメータです。パラメータには好きな名前をつけることができますが、event を省略した e で表すのが一般的です。

イベントハンドラーのパラメータに e を指定することで、イベントオブジェクトが持つさまざまな情報 (プロパティ) にアクセスできるようになるのです。

パラメータについては、こちらの記事を参考にしてください。

いろいろなイベントオブジェクト

イベントオブジェクトが持つプロパティは、発生するイベントによって異なります。２つのイベントを例にして、プロパティの違いを見てみましょう。下のようなイベントハンドラー関数 logEvent を定義して、プロパティの違いを確認していきますよ。

// イベントハンドラー
function logEvent(e) {
  console.log(e);
}

KeyboardEvent オブジェクト

何かのキーが押されたときに発生する keydown イベントでは、KeyboardEvent というイベントオブジェクトが作られます。これには、押されたキーの文字情報などが含まれます。

下のコード例では、入力欄にキーボードで何かが入力されたときに KeyboardEvent オブジェクトが作られ、引数としてイベントハンドラー logEvent に渡されます。

const input = document.querySelector('input');

// イベントハンドラー
function logEvent(e) {
  console.log(e);
}

input.addEventListener('keydown', logEvent);

コンソール出力結果は下のようになります。keydown イベントによって作られたオブジェクトには、key や code など、キーの種類を表すプロパティが含まれていることが分かりますね。

Object {isTrusted: true, key: "a", code: "KeyA", location: 0, ctrlKey: false…}

MouseEvent オブジェクト

何かがクリックされたときに発生する click イベントでは、MouseEvent というイベントオブジェクトが作られます。これには、クリックされた座標情報などが含まれます。

下のコード例では、ボタンがクリックされたときに MouseEvent オブジェクトが作られ、引数としてイベントハンドラー logEvent に渡されます。

const button = document.querySelector('button');

// イベントハンドラー
function logEvent(e) {
  console.log(e);
}

button.addEventListener('click', logEvent);

コンソール出力結果は下のようになります。click イベントによって作られたオブジェクトには、screenX や screenY など、座標のプロパティが含まれていることが分かりますね。

Object {isTrusted: true, screenX: 597, screenY: 56, clientX: 38, clientY: 17…}

次のセクションでは、イベントオブジェクトを使った簡単なプロジェクトを紹介します。function(e) の e がどのように役立つのか、動きとコードを見ながら理解を深めていきましょう。

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

KeyboardEvent オブジェクトの key プロパティを使ったプロジェクトを試してみてください。入力欄をクリックしてからキーボードのキーを押すと、押されたキーの種類が表示されます。

See the Pen JavaScript - KeyboardEvent key property by Pyxofy (@pyxofy) on CodePen.

① キーボードのキーを押すとkeydown イベントが発生し、KeyboardEvent オブジェクトが作られます。
② KeyboardEvent オブジェクトは、イベントハンドラーに引数として渡されます。
③ KeyboardEvent オブジェクトの key プロパティにアクセスすることで、押されたキーの種類を取得できます。

const input = document.querySelector('input');
const text = document.querySelector('h3');

// イベントハンドラー
function showKeyValue(e) { // ②
  let key = e.key; // ③
  text.textContent = '押されたキーは ' + key + ' です';
}

input.addEventListener('keydown', showKeyValue); // ①

マウスポインターの座標を取得する

MouseEvent オブジェクトの screenX プロパティと screenY プロパティを使ったプロジェクトを試してみてください。正方形のエリア内でマウスを動かすと、マウスポインターの座標が表示されます。

See the Pen JavaScript - MouseEvent screenX screenY property by Pyxofy (@pyxofy) on CodePen.

① マウスポインターを動かすとmousemove イベントが発生し、MouseEvent オブジェクトが作られます。
② MouseEvent オブジェクトは、イベントハンドラーに引数として渡されます。
③ MouseEvent オブジェクトの screenX プロパティや screenY プロパティにアクセスすることで、マウスポインターの座標を取得できます。

const area = document.querySelector('.container');
const text = document.querySelector('h3');

// イベントハンドラー
function showCoords(e) { // ②
  let x = e.screenX; // ③
  let y = e.screenY; // ③
  let coordinates = 'X 座標: ' + x + ' / Y 座標: ' + y;
  text.textContent = coordinates;
}
// イベントハンドラー
function clearCoords() {
  text.textContent = 'エリア内に戻ってください';
}

area.addEventListener('mousemove', showCoords); // ①
area.addEventListener('mouseout', clearCoords);

このコードにはイベントハンドラー関数が２つありますね。ひとつはパラメータ e を指定し、もうひとつは e を指定していません。違いは次のとおりです。

function showCoords(e)：イベントハンドラー showCoords は、マウスポインターの座標を表示する関数です。パラメータとして e が指定されているので、イベントオブジェクトが持つ座標プロパティにアクセスすることが可能です。
function clearCoords()：イベントハンドラー clearCoords は、文字列を変更する関数です。イベントオブジェクトの詳細情報にアクセスする必要がないので、パラメータ e は指定されていません。

まとめ

今回は、JavaScript のイベントオブジェクトについて紹介しました。

発生したイベントの情報を格納しているのがイベントオブジェクトです。「クリックされた要素は何？」「どのキーが押された？」「ポインターの座標はどこ？」など、イベントの詳細情報を知りたいときは、イベントハンドラー関数にパラメータ e を指定します。e はevent を省略したもので、イベントオブジェクトが持つさまざまな情報にアクセスするために使われる変数だということを覚えておきましょう。

最後まで読んでいただき、ありがとうございます。この記事をシェアしてくれると嬉しいです！

X (Twitter) でシェア

LinkedIn でシェア

こちらもチェック！ X (Twitter) @pyxofy・LinkedIn・Mastodon・Facebook