イベントオブジェクトの取得 | イベントの基本概念 | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

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

JavaScriptにおけるイベントオブジェクトは、ユーザーが行った操作(クリックやキー入力など)に関する情報を提供する特別なオブジェクトです。イベントが発生すると、自動的に生成され、イベントリスナー内でアクセスできます。イベントオブジェクトには、イベントのタイプや対象要素、マウスの位置、キーコードなど、さまざまな情報が含まれています。

イベントオブジェクトの基本的な取得方法

イベントオブジェクトは、イベントリスナー内で関数の引数として自動的に渡されます。一般的にはeventeと名付けられ、イベントに関する情報を扱います。

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

// クリックイベントでイベントオブジェクトを取得
button.addEventListener("click", function(event) {
    console.log(event);  // イベントオブジェクトが表示される
});

この例では、ボタンがクリックされたときにeventオブジェクトがコンソールに表示されます。

イベントオブジェクトのプロパティ

イベントオブジェクトには、さまざまなプロパティが含まれており、ユーザーの操作に関する詳細な情報を取得できます。代表的なプロパティを以下に示します。

  • type: イベントの種類(例: "click", "keydown"など)
  • target: イベントが発生した要素
  • currentTarget: イベントリスナーが登録された要素
  • clientX/clientY: マウスイベントの場合、マウスの位置(ビューポート基準)
  • keyCode: キーボードイベントの場合、押されたキーのコード

クリックイベントでマウスの位置を取得する例

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

// クリックイベントでマウスの座標を取得
button.addEventListener("click", function(event) {
    console.log("X座標: " + event.clientX);
    console.log("Y座標: " + event.clientY);
});

この例では、ボタンがクリックされたときに、マウスのX座標とY座標がコンソールに表示されます。

イベントオブジェクトのメソッド

イベントオブジェクトには、いくつかのメソッドも用意されており、イベントの伝播やデフォルトの動作を制御できます。

  • preventDefault(): イベントのデフォルトの動作をキャンセルする
  • stopPropagation(): イベントが親要素に伝播するのを防ぐ
  • stopImmediatePropagation(): 他のイベントリスナーが実行されるのを防ぐ

デフォルトの動作をキャンセルする例

const link = document.querySelector("a");

// リンクのクリックでデフォルトの動作をキャンセル
link.addEventListener("click", function(event) {
    event.preventDefault();  // リンク先に遷移しない
    console.log("リンクのクリックがキャンセルされました");
});

この例では、リンクをクリックしてもページ遷移が行われず、代わりにコンソールにメッセージが表示されます。

イベントオブジェクトの使用例まとめ

以下の表に、よく使用されるイベントオブジェクトのプロパティとメソッドをまとめました。

プロパティ/メソッド 説明
type イベントの種類(例: "click"、"keydown"など)
target イベントが発生した要素
clientX/clientY マウスイベントの際のX/Y座標(ビューポート基準)
preventDefault() デフォルトの動作をキャンセルする
stopPropagation() イベントの伝播を防ぐ

イベントオブジェクトとイベントバブリング

イベントオブジェクトは、イベントが発生した要素とイベントリスナーが設定された要素を区別するために使用されます。targetプロパティはイベントが発生した具体的な要素を、currentTargetプロパティはリスナーが設定された要素を指します。

バブリングの例

const div = document.querySelector("div");
const button = document.querySelector("button");

// div要素にリスナーを追加
div.addEventListener("click", function(event) {
    console.log("div clicked, event.target: " + event.target.tagName);
});

// button要素にリスナーを追加
button.addEventListener("click", function(event) {
    console.log("button clicked");
});

この例では、button要素をクリックすると、divのクリックリスナーも実行されますが、event.targetでクリックされた具体的な要素(button)を識別できます。

まとめ

JavaScriptのイベントオブジェクトは、ユーザーが行った操作に関する情報を提供する重要なオブジェクトです。イベントの種類、発生した要素、マウスの位置やキーコードなど、多くの情報が含まれており、イベントの伝播を制御したり、デフォルトの動作をキャンセルするメソッドも提供されています。イベントオブジェクトを活用することで、より複雑でダイナミックなインタラクションを実現できます。