JavaScript element.dispatchEvent()

element.dispatchEvent()は、HTML要素にJavaScriptでボタンクリックなどのイベントを発生させるメソッドである。

JavaScriptでイベントを発生させる方法

JavaScriptでは，次の手順でイベントを発生させることができる。

1. document.createEventでイベントを作成する。
2. event.initEventでイベントを初期化する。
3. element.dispatchEventで要素にイベントを送る。

dispatchEvent()の構文

element.dispatchEvent(event)

event

要素に送るイベントのEventオブジェクトを指定する。

dispatchEvent()の使用例

clickイベントを発生させるJavaScriptの例を示す。

<p onclick="alert('親要素がクリックされました。');">
  <button id="btn1" onclick="alert('ボタン1がクリックされました。');">ボタン1</button>
</p>
<button id="btn2" onclick="clickBtn();">ボタン2</button>

<script>
function clickBtn() {
  // イベントの作成
  if (document.createEvent) {
    var evt = document.createEvent('MouseEvents');
    // イベントの初期化
    evt.initEvent('click', false, true);
    // イベントを発生させる
    var elm = document.getElementById('btn1');
    elm.dispatchEvent(evt);
  } else {
    // for IE8
    document.getElementById('btn1').fireEvent('onclick');
  }
}
</script>

上記JavaScriptの実行結果を示す。

ボタン1

この例では、ボタン2がクリックされたときに、ボタン1にクリックイベントを発生させている。

ただし、イベントを初期化する際にイベントをバブリング（伝搬）させないようにしているため、ボタン2をクリックしても、ボタン1の親要素にはイベントは伝わらない。