【JavaScript】Eventオブジェクト - イベントをプログラムから発生させる

JavaScriptでブラウザイベントをプログラムから発生させる方法を解説します。

イベントの生成

Eventオブジェクトのコンストラクタを使ってイベントを生成します。

基本構文

new Event(イベント種別)

サンプル

Sample

<button id="btn">ボタン</button>

<script type="text/javascript">
    function output() {
        console.log("Hello World");
    }
    
    let btn = document.getElementById('btn');
    btn.addEventListener('click', output);
    
    let e = new Event('click');
</script>

プレビュー

イベントの発生

DOMのdispatchEventメソッドを使ってイベントを発生します。

基本構文

変数.dispatchEvent(Eventオブジェクト)

サンプル

Sample

<button id="btn">ボタン</button>

<script type="text/javascript">
    function output() {
        console.log("Hello World");
    }
    
    let btn = document.getElementById('btn');
    btn.addEventListener('click', output);
    
    let e = new Event('click');
___diff_start
+    btn.dispatchEvent(e);
___diff_end
</script>

プレビュー

Console

Hello World

ブラウザでボタンをクリックしなくても、コンソールにHello Worldを出力します。
このことからプログラムからイベントを発生できたことが分かります。