Categories: JavaScript

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

以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

issiki_wp