【JavaScript】イベントオブジェクトとは何か？実例で解説(引数eやevent,主なプロパティ,preventDefault, stopPropagation)

javascript-prograshi（プロぐらし）-kv JavaScript
記事内に広告が含まれていることがあります。

JavaScriptでクリックやキー入力を扱うとき、関数の引数に「e」や「event」を目にすることも多いのではないでしょうか？

このeやeventをイベントオブジェクトと呼びます。

この記事では、イベントオブジェクトとは何なのか？その中に含まれるtargetなどの主要プロパティの使い方や、ブラウザのデフォルトの動作を止めるpreventDefault()、イベントの伝播を制御するstopPropagation()を、実例のコードを使って分かりやすく解説しています。



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

イベントオブジェクトは、発生したイベントに関するあらゆる情報を保持する、JavaScriptのオブジェクトです。

たとえば、ボタンがクリックされた、キーボードのキーが押された、マウスが動いたなど、ユーザーのアクションやブラウザの動作に応じてイベントが発生します。

このイベントが発生した際に、JavaScriptの処理（イベントハンドラやイベントリスナーと呼ばれる関数）に自動的に渡されるのがイベントオブジェクトです。


引数eやeventで受け取る

イベント処理をする関数（イベントリスナー）を定義するとき、多くの場合、最初の引数として自動的にこのイベントオブジェクトが渡されます。

慣習的に「event」や「e」といった名前で受け取ることが多いです。

element.addEventListener('click', (event) => {
    console.log(event); 
});


イベントオブジェクトに含まれる主なデータ

重要な共通プロパティ

イベントの種類（クリック、キーボード入力など）によって含まれる情報は異なりますが、多くのイベントオブジェクトに共通して含まれる重要な情報があります。

プロパティ名意味例
type発生したイベントの種類'click'、'mouseover'など
targetイベントが最初に発生した要素（HTML要素）クリックされたボタン要素
currentTargetイベントリスナーが登録されている要素イベント処理を定義した親要素など


イベントの種類ごとの特殊なプロパティ

マウス操作やキーボード操作など、特定のイベントではさらに詳細な情報がイベントオブジェクトに追加されます。

  • マウスイベント (click, mousemoveなど):
    • clientX / clientY: マウスカーソルのブラウザウィンドウ内での座標
    • button: どのマウスボタンが押されたか
  • キーボードイベント (keydown, keyupなど):
    • key: 押されたキーの文字（例: 'a'、'Enter'）
    • keyCode / code: 押されたキーの識別コード（レガシーな場合あり）


実例：イベントオブジェクトの使い方

例えば、targetプロパティはウェブページ上に複数のボタンがあり、どのボタンがクリックされたかによって異なる処理をしたい場合に便利です。

イベントオブジェクト.targetとすることでイベントが発生したタグの情報を取得することができます。

イベントオブジェクト.target.textContentとすれば、イベントが発生したタグに記述されていたテキストを取得することができます。

<button id="btn1">ボタン1</button>
<button id="btn2">ボタン2</button>
<div id="log"></div>
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
const log = document.getElementById('log');

// 2つのボタンに同じ関数を登録
function handleClick(e) {
    log.textContent = `「${e.target.textContent}」がクリックされました！`;
    
    // e.target.id でその要素のIDも取得可能
    console.log('ID:', e.target.id);
}

btn1.addEventListener('click', handleClick);
btn2.addEventListener('click', handleClick);


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

ブラウザには、特定のイベントが発生したときに自動的に行う、デフォルトの動作が設定されていることがあります。

例えば以下のようなものがあります。

  • <a>タグのクリック: ページを移動する
  • <form>の送信ボタンのクリック: フォームデータを送信し、ページをリロードする
  • 右クリック: コンテキストメニュー（右クリックメニュー）を表示する

これらのデフォルトの動作を止めたいときに、イベントオブジェクトのpreventDefault()メソッドを使います。

以下は、フォーム送信ボタンクリック後にページのリロードをキャンセルする処理です。

<form id="myForm">
    <input type="text">
    <button type="submit">送信</button>
</form>
<p id="message"></p>
const myForm = document.getElementById('myForm');
const message = document.getElementById('message');

myForm.addEventListener('submit', function(e) {
    //ページリロードをキャンセル
    e.preventDefault(); 
    
    message.textContent = 'フォームの送信がキャンセルされ、メッセージが表示されました！';
});


イベントの伝播を停止する｜stopPropagation

イベントは、発生した要素から親要素へと順に伝わっていく性質があります（これをバブリングと呼びます）。

例えば、buttonタグをクリックすると、イベントはボタンから親のdiv、さらに親のbody、最終的にhtml、windowへと伝わっていく

この伝播を途中で止めたい場合に、stopPropagation()メソッドを使います。

MEMO

「Propagation (プロパゲーション)」は、「伝播」を意味する英語です。


例えば、親要素の中に子ボタンがあるHTMLがあるとします。

<div id="parent" style="padding: 20px; background-color: lightblue;">
    親要素
    <button id="child">子ボタン</button>
</div>


stopPropagatoinがない場合、クリックするのは「子ボタン」ですが、イベント伝搬により親要素であるdivタグもクリックされたとみなされます。

const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', function() {
    consol.log('親要素がクリックされました');
});

child.addEventListener('click', function(e) {
    console.log('子ボタンがクリックされました');
});

このため、consoleには、以下のように２つのメッセージが表示されます。


stopPropagatoinメソッドを使うと、親要素への伝搬を防ぐことができます。

const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', function() {
    consol.log('親要素がクリックされました');
});

child.addEventListener('click', function(e) {
  e.stopPropagation(); //伝播を停止！
  console.log('子ボタンがクリックされました');     
});



タイトルとURLをコピーしました