JavaScript

【初心者向け】JavaScriptでイベントを任意に発火させる方法

JavaScriptではイベントの記述をよく用いますが、その際に「このときにユーザーの操作に関係なくイベントを発火させたい・・・」となることは多々あると思います。

JavaScript側からイベントを実行させる場合は、主に以下2つの方法を用います。

• イベントメソッドを使う
• dispatchEventを使う

2つの方法と言ったものの、それぞれ異なる性質を持つメソッドであるため、それぞれには使い方・使用する場面は異なります。

今回は、任意のタイミングでイベントを発火させる方法について解説していきます。

イベントメソッドを使う

イベントメソッドとは、以下のようにイベント名を冠したメソッドのことです。

// clickメソッドでclickイベントを発火
[対象のElement].click();

イベントメソッドはElementクラスのオブジェクトで呼び出せるメソッドで、主にquerySelectorメソッドなどで呼び出した要素を対象に実行します。

※全てのイベントにイベントメソッドが用意されているわけではありません。

clickイベントはよく使われるイベントなので、イベントメソッドが用意されているだけで、通常は後述のdispatchEventを使用します。

以下にイベントメソッドの使用例を載せます。

<!-- style(CSS) -->
<style>
  /** 選択中のボタンのみ背景色を「緑」に */
  button.selected {
    background: lightgreen;
  }
</style>

<!-- HTML -->
<div>
  <button>ボタン1</button>
  <button>ボタン2</button>
  <button>ボタン3</button>
</div>

<script>
  // 各ボタン要素にイベントを設置
  // （buttonは複数あるため、forEachで一つずつにイベントリスナーを設置）
  document.querySelectorAll("button").forEach(e => {
    e.addEventListener("click", (e) => {
      const target = e.target;

      // クリックされた要素のクラス属性にselectedを追加
      target.classList.add("selected");
    });
  });

  /** ──【本題】JavaScriptからイベントを発火── */

  // 一番初めのボタン要素を指定するセレクタ
  const selector = "button:first-child";
  const element = document.querySelector(selector);

  // clickイベント発火
  element.click();
</script>

上記コードを実行すると、画面を開いた際、一番先頭にあるボタン要素にselectedクラスが付いている（clickイベントが無事発火されている）ことがわかります。

dispatchEventを使う

イベントメソッドとは別に、dispatchEventというメソッドがあります。

clickイベントなどのイベントメソッドはもちろん、イベントメソッドが用意されていないイベントを発火させる場合、すべてこのメソッドで対応します。

// dispatchEventでclickイベントを発火
[対象のElement].dispatchEvent(new Event("click"));

dispathEventを使う場合は、以下のようにイベントリスナーの処理で、呼び出し元の要素に対して実行することが多いです。

// 押したキーを離した際のイベントリスナー設置
[対象の要素].addEventListener("keyup", (e) => {
  const target = e.target;

  // [対象の要素]でイベントが起きたとき、changeイベントを発火させる
  target.dispatchEvent(new Event("change"));
});

上記のサンプルは少しわかりにくいかもしれませんが、input要素など、文字を入力する要素において、キーを離した（何か文字を打った）際に、changeイベントで入力中のテキストを確定させる（changeイベントを発生させる）という処理です。

「○○文字入力中」などの文字数カウントを出すとき、input要素にchangeイベントを発生させてから、input要素の文字列を取得してカウントする処理をよく書きます。

dispatchEventを使わない理由

まあ、先述のサンプルを見ればわかる通り、dispatchEventはコードとして見づらいので、基本的に採用したくありません。

ただ、EventTargetクラスに対してイベントを発火させたい際に、イベントメソッドを使用できないため、仕方なくつかいます。

ElementクラスとEventTargetクラス

JavaScriptで要素を扱う場合、主にElementクラスとEventTargetクラスを操作することが多いです。

大抵のテキストエディタやIDEでは、対象の要素や変数にマウスカーソルをかざすと、それが何のクラスなのか、わかるようになっています。

VSCodeの場合は、以下のように表示されますね。

Elementクラスは、基本的にquerySelectorメソッドなど、要素を取得するメソッドを通じて取得できるデータの型です。

一方のEventTargetクラスは、イベントのコールバックから参照する呼び出し元の要素（targetプロパティなど）を取得する際の型です。

EventTargetクラスに対してイベントメソッドを適用しようとしても何も起きないので、イベントの戻り値に対してイベントを発火させる場合、イベントメソッドではなく、dispatchメソッドを使用する必要があります。

element.addEventListener("change", (eventTarget) => {
  // ×No
  eventTarget.click();

  // 〇Yes
  eventTarget.dispatchEvent(new Event("click"))
})

まとめ

イベントをJavaScriptから発生させる場合、イベントメソッドとdispathEventメソッドのどちらかを使うことが多いです。

ただ、基本的にはイベントメソッドのみ使用することになります。

イベントリスナーのコールバック関数でtargetプロパティに対してイベントを発火させたい場合は、イベントメソッドを使用できないため、dispatchEventメソッドを使うようにしましょう。