指定したイベントを発生させる

イベントを強制的に発生させる

JavaScriptはクリックやキー入力、ページの読み込みなどをはじめとしたページ上の操作をトリガーにして、各種イベントをイベントリスナーより検知することができます。
通常はこれらのイベントは操作によって発生するまで待機状態となりますが、強制的にイベントを発生されることも可能です。

イベントを強制的に発生させるときは、次の順序で準備をして発生させます。

1. イベントの対象になるHTML要素を取得
2. イベントを作成
3. dispatchEventメソッドでイベントを発生させる

今回は例として、id属性「text1」を持つp要素をクリックしたら、1行テキストフォームに入力がフォーカスした状態になるように設定します。
HTMLは以下のコードを使います。

HTML コード例

<p id="text1">このテキストをクリックするとフォーム入力に移動する</p>
<form id="form_recipe" method="post" action="">
  <label for="input_name">テキスト入力フォーム：</label>
  <input type="text" id="input_name" name="input_name" value="">
</form>

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  // p要素にイベントリスナーを登録
  let p_element = document.getElementById("text1");
  p_element.addEventListener("click", function(){

    // 強制的にイベントを発生させるコードをここに記述する

  });

  // 1行テキストフォームにイベントリスナーを登録
  let input_element = document.getElementById("input_name");
  input_element.addEventListener("click", function(){
    this.focus();
  });

});

1行目の「DOMContentLoaded」はページ読み込みが完了したときに発生するイベントです。
これをイベントリスナーで検知することで、ページ読み込みが完了したタイミングでHTML要素のイベントリスナーを登録するなど初期設定を実行することができます。

続いて、getElementByIdメソッドでid属性からp要素を取得して、変数p_elementに保持します。
その後にaddEventListenerメソッドでマウスの左クリックをイベントリスナーに登録します。
これで、p要素がクリックされたときにfunction(){〜}に記述した処理が実行されるようなります。
後ほど、ここにイベントを強制的に発生させるコードを追記します。

1行テキストフォームのinput要素に対しても、先ほどのp要素と同じように左クリックのイベントリスナーを登録します。
左クリックされたときに実行する処理は、focusメソッドを実行して自分自身を選択状態（入力できる）にします。

ここまでイベントリスナーの登録を行いましたが、最終的にはp要素を左クリックすると「input要素を左クリック」というイベントを強制的に発生させて、1行テキストフォームのイベントリスナーに記述したfocusメソッドが実行されるようになります。

それではいよいよ、イベントを強制的に発生させるコードを追記していきます。
以下の赤字のコードを追記します。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  // p要素にイベントリスナーを登録
  let p_element = document.getElementById("text1");
  p_element.addEventListener("click", function(){

    let input_element = document.getElementById("input_name");
    let html_event = new Event( "click", {"bubbles":true, "cancelable":true});

    // イベントを発生させる
    input_element.dispatchEvent(html_event);
  });

  // 1行テキストフォームにイベントリスナーを登録
  let input_element = document.getElementById("input_name");
  input_element.addEventListener("click", function(){
    this.focus();
  });

});

追記した1行目では1行テキストフォームを改めてid属性で取得します。

その後に、発生させるイベントをcreateEventメソッドで作成します。
続いて、新しいEventオブジェクトを作成して変数html_eventに入れます。
ここでオブジェクトを作成するときに、発生させるイベントについての指定をすることができます。

JavaScript コード例

new Event( event, {"bubbles":true, "cancelable":true});

1. event – イベントの種類を文字列で指定
2. bubbles – イベントチェーンを通じてイベントを発生させるかtrue、falseのどちらかで指定
3. cancelable – 発生したイベントを取り消せるかtrue、falseのどちらかで指定

第1パラメータにはイベントの種類、第2パラメータにはオブジェクト形式でオプションを指定します。
今回は1行テキストフォームに対して「左クリック」のイベントを発生させたいので、コード例のパラメータは「"click", {"bubbles":true, "cancelable":true}」になります。

最後に、dispatchEventメソッドを実行してイベントを強制的に発生させます。
ここでイベントが発生すると「input_element.addEventListener("click", function(){〜}」で左クリックを検知して、1行テキストフォームがフォーカスした状態になります。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。