【JavaScript入門】任意のタイミングでイベントを実行するdispatchイベント

2021年5月8日2023年1月22日

dispatchイベントを使うと、例えばユーザがボタンをクリックしていなくても、任意のタイミングでクリックイベントを呼べたりできるようになります。

See the Pen
dispatch by shiakisudev (@shiakisu)
on CodePen.

HTML

<button id="btn">現在日時取得</button>
<div id="time"></div>

window.addEventListener('DOMContentLoaded', function(){
    let button = document.getElementById("btn");
    button.addEventListener("click",displayTime,false);

    function displayTime(){
        let now = new Date();
        document.getElementById("time").textContent = now.toLocaleString();
    }

    //１秒ごとにクリックイベントを呼び出す。
    let event = new Event("click");
    window.setInterval(function(){
        //以下のコードが実行されたタイミングでユーザがクリックをしたのと同じことになる。
        button.dispatchEvent(event);
    },1000);
});