JavaScript | Web API：DOM 拡張 API － Event コンストラクタ

JavaScript JavaScript
スポンサーリンク

Event コンストラクタは「既存イベントを自分の手で発火させるための素のイベント」

Event コンストラクタは、
「クリックや変更など、既に名前が決まっているイベントを、自分の手で“発生させたことにする”ための一番シンプルなイベントオブジェクト」 を作る道具です。

click や change などは、本来ブラウザが自動で発火します。
でも、「コードからも同じイベントを起こしたい」ことがあります。

ボタンのクリック処理をテストしたい
フォームの change イベントを手動で起こしたい
ある処理の最後に「更新されたよ」というイベントを飛ばしたい

こういうときに、new Event("click") のようにしてイベントを作り、
dispatchEvent で発火させます。

CustomEvent が「アプリ独自のイベント」を作るためのものだとしたら、
Event は「既存のイベント名を使う、素のイベント」を作るためのもの、というイメージです。

一番基本：Event で click を自分で発火させてみる

click イベントをコードから起こす

HTML を想像します。

<button id="btn">押してね</button>

JavaScript はこうです。

const btn = document.querySelector("#btn");

btn.addEventListener("click", () => {
  console.log("クリックされました！");
});

// ここで「自分でクリックイベントを発火」
const ev = new Event("click");
btn.dispatchEvent(ev);
JavaScript

流れを言葉で整理するとこうなります。

  1. addEventListener("click", ...) でクリック時の処理を書く
  2. new Event("click") で「click イベントオブジェクト」を作る
  3. btn.dispatchEvent(ev) で「このボタンで click が起きたことにする」

これで、ユーザーが実際にクリックしなくても、
「クリックされたときの処理」が実行されます。

ここで掴んでほしいのは、

「イベントリスナーは“誰が発火したか”を気にしない」
「ブラウザが発火しても、自分で発火しても、同じように動く」

という感覚です。

Event コンストラクタの形とオプション

new Event(type, options) の基本

Event コンストラクタはこういう形です。

const ev = new Event("change", {
  bubbles: true,
  cancelable: true
});
JavaScript

type はイベント名（"click", "change", "input" など）
options はイベントの性質を決めるオブジェクトです。

よく使うのは次の 2 つです。

bubbles
イベントが親要素に伝わるかどうか（バブリングするか）

cancelable
event.preventDefault() でキャンセルできるかどうか

例えば、change イベントをフォーム要素で使うときは、
bubbles: true にしておくと、親要素でも拾いやすくなります。

const ev = new Event("change", { bubbles: true });
input.dispatchEvent(ev);
JavaScript

例題：input の値を書き換えてから change イベントを発火する

HTML

<input id="name" type="text">

JavaScript

const input = document.querySelector("#name");

input.addEventListener("change", (event) => {
  console.log("change 発火。現在の値:", event.target.value);
});

// 値を書き換える
input.value = "太郎";

// change イベントを自分で発火
const ev = new Event("change", { bubbles: true });
input.dispatchEvent(ev);
JavaScript

ここで起きていることはこうです。

  1. input に change リスナーを付ける
  2. JavaScript から input.value を書き換える
  3. new Event("change") で change イベントを作る
  4. dispatchEvent で「change が起きたことにする」

これで、ユーザーがフォーカスを外さなくても、
change イベントの処理が実行されます。

「値を変えたら change が起きる」という前提で書かれたコードを、
自分の手でトリガーできるわけです。

Event と CustomEvent の違いを整理する

Event は「型だけ」、CustomEvent は「データ付き」

Event は、基本的に「イベントの種類（type）と性質（bubbles, cancelable）」だけを持つ、
とてもシンプルなイベントです。

一方で CustomEvent は、
detail というプロパティに好きなデータを乗せられます。

const ev1 = new Event("update");

const ev2 = new CustomEvent("update", {
  detail: { count: 10 }
});
JavaScript

受け取る側では、

Event なら event.type くらいしか見るものがない
CustomEvent なら event.detail からデータを取り出せる

という違いがあります。

「ただ“起きたこと”だけ伝えたい」なら Event
「一緒にデータも渡したい」なら CustomEvent

という使い分けが基本です。

既存のイベント名を使うなら Event が自然

例えば、

"click"
"change"
"input"
"submit"

など、既に意味が決まっているイベント名を使うときは、
Event を使うのが自然です。

一方で、

"cart:add"
"user:login"
"score:changed"

のようなアプリ独自のイベント名を使うときは、
CustomEvent で detail にデータを乗せるほうが便利です。

例題：フォーム送信後に「submit 後イベント」を自分で発火する

HTML

<form id="form">
  <input name="q" type="text">
  <button type="submit">送信</button>
</form>

JavaScript

const form = document.querySelector("#form");

// submit 時の処理
form.addEventListener("submit", (event) => {
  event.preventDefault();
  console.log("フォームが送信されました");

  // ここで「送信後イベント」を発火
  const ev = new Event("after:submit");
  form.dispatchEvent(ev);
});

// 送信後イベントの処理
form.addEventListener("after:submit", () => {
  console.log("送信後の処理を実行します");
});
JavaScript

ここでは、あえて CustomEvent ではなく Event を使っています。
理由は、「特にデータを渡す必要がないから」です。

"after:submit" という名前のイベントを、

Event で作る
dispatchEvent で発火する
addEventListener で受け取る

という流れで、「処理の区切り」をイベントとして表現しています。

こうすると、

「送信時の処理」と
「送信後の処理」を

きれいに分けて書けるようになります。

重要ポイント：Event で「テストしやすいコード」にする感覚

イベントリスナーを「テスト対象」にできる

例えば、ボタンのクリックで何か処理をするコードがあるとします。

btn.addEventListener("click", () => {
  doSomething();
});
JavaScript

このとき、doSomething が正しく呼ばれるかをテストしたいなら、
Event で click を自分で発火させればいいわけです。

const ev = new Event("click");
btn.dispatchEvent(ev);
JavaScript

これで、「ユーザーがクリックしたとき」と同じ経路で処理が走ります。

「イベントをコードからも発火できる」ということは、
「イベントリスナーをテストしやすい」ということでもある
と捉えておくと、設計の視点が一段上がります。

「物理イベント」と「論理イベント」を分ける

もう一歩踏み込むと、

物理イベント（ユーザーのクリック・入力など）
論理イベント（アプリの状態変化：更新された、追加された、削除された など）

を分けて考えると、コードが整理されます。

物理イベント → DOM の click, input, change など
論理イベント → Event / CustomEvent で自分で発火する

という構造にすると、

「ユーザー操作」と「アプリの出来事」が頭の中で整理され、
イベント駆動の設計がしやすくなります。

初心者として Event コンストラクタで本当に掴んでほしいこと

Event コンストラクタは「既存イベント名で、素のイベントオブジェクトを作る」ためのもの
new Event(type, { bubbles, cancelable }) でイベントを作り、dispatchEvent で発火する
クリックや change などを「コードからも起こしたことにできる」
データを渡したいときは CustomEvent の detail を使う
イベントを自分で発火できると、「テストしやすい」「論理イベントを設計しやすい」コードになる

まずは、

ボタンに click リスナーを書いてから、
new Event("click") → dispatchEvent で自分で発火してみてください。

「ユーザーの操作」と「イベントオブジェクト」が頭の中でつながると、
Event コンストラクタはただの API ではなく、
「アプリの動きをイベントとして再現・設計するためのスイッチ」 に見えてきます。

スポンサーリンク
タイトルとURLをコピーしました