イベントをコードから発生させる(dispatchEvent)

イベントは HTTP ページをブラウザで見ているユーザーの操作によって発生しますが、プログラムの中で新しいイベントを作成し指定した対象でイベントを発生させることができます。ここではイベントをコードから発生させる方法について解説します。

(Last modified: )

新しいイベントを作成する

最初に新しいイベントを作成します。作成するには Event オブジェクトをのコンストラクタを使用します。 

new Event(eventtype[, option])

1 番目の引数にイベントの種類を表す文字列を指定します。既存のイベントを作成する場合は 'click' や 'mousedown' などを指定します。カスタムイベントを作成する場合は任意の名前を指定してください。

省略可能な 2 番目の引数には次の 3 つの値に関する値を持つオブジェクトを指定します。 

bubbles     初期値は false
cancelable  初期値は false
composed    初期値は false

bubbles はバブリングフェーズでイベントが伝搬されていくかどうか、 cancelable はイベントがキャンセル可能かどうか、 composed については詳細が分かっていません。例えば {bubbles: true, cancelable: false} のようにオブジェクトとして指定します。

例えば click イベントを新しく作成するには次のように記述します。 

let e = Event('click');

イベントを発生させる

EventTarget オブジェクトの dispatchEvent メソッドは対象となるターゲットに引数に指定したイベントを発生させます。書式は次のとおりです。 

target.dispatchEvent(event)

引数には Event オブジェクトを指定してください。

例えば click イベントを発生させるには次のように記述します。 

let e = Event('click');

let target = document.getElementById('xxx');
target.dispatchEvent(e);

なお発生したイベントがユーザーの操作によって発生したものか、それとも dispatchEvent メソッドによるコードから発生させられたものかは Event.isTrusted プロパティを参照することで判別することができます。 true だった場合にはユーザーの操作によるものです。

サンプルコード

次のサンプルを見てください。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>

<p>ボタンをクリックしてください</p>

<div>
<input type="button" id="btnA" value="buttonA">
<input type="button" id="btnB" value="buttonB">
</div>

<script>
    let btnA = document.getElementById('btnA');
    let btnB = document.getElementById('btnB');

    btnA.addEventListener('click', function(event){
      console.log('buttonA:' + event.isTrusted);

      let newevent = new Event('click');
      btnB.dispatchEvent(newevent);
    });

    btnB.addEventListener('click', function(event){
      console.log('buttonB:' + event.isTrusted);
    });
</script>

</body>
</html>

2 つの input 要素があります。 1 つ目の input 要素の click イベントに対するイベントリスナーでは、 click イベントを作成し 2 つ目の input 要素に対してイベントを発生させています。

1 つ目の input 要素をクリックすると、 1 つ目の input 要素のイベントリスナーが呼び出されますが、その中で 2 つ目の input 要素の click イベントを発生させているので 2 つ目の input 要素のイベントリスナーも呼び出されます。

イベントを発生させる(1)

1 つ目の input 要素のイベントリスナーはユーザーの操作によって呼び出されたものなので true が表示され、 2 つ目の input 要素のイベントリスナーはコードから発生したイベントによって呼び出されたものなので false が表示されます。

なお 2 つ目の input 要素をクリックすると、 2 つ目の input 要素のイベントリスナーが呼び出されますが、ユーザーの操作によるものなので今度は true が表示されます。

イベントを発生させる(2)

-- --

イベントをコードから発生させる方法について解説しました。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。

カテゴリ
検索