【8/27まで】Udemyの人気コースが今なら1,200円から!!

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

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

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

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

HTML

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

js

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();
    }

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です