ぷるぷるの雑記

低レイヤーがんばるぞいなブログ. 記事のご利用は自己責任で.

javascriptのイベントをスクリプトから発火する

JavaScript

クリックイベントを発火するスクリプト

下のコードはクリックイベントリスナーを登録したのち、スクリプトからクリックイベントを発火するコードです。

<!-- index.html -->

<body>
    <button id="btn">click here</button>
    <script>

    let target = document.getElementById('btn');

    window.onload=()=>{
        let evnt = new Event("click");
        target.dispatchEvent(evnt);
    }

    elem.addEventListener('click', ()=>{
        console.log("btn clicked");
    });

    </script> 
</body>


実際にイベントを発火しているのは次の部分になります。

target.dispatchEvent( event );


イベントを作成しているのは次の部分になります。

let evnt = new Event("click");


一行にまとめると次のようになります

target.dispatchEvent( new Event('click') );

キーボードイベントを発火するスクリプト

特定のキーをスクリプトから押下したい場合は次のようなイベントを作ります

let evnt = new Event( "keydown",{key: "a" })

イベントの作成

先ほどのコードではEventコンストラクターを用いてイベントを作成しましたが、Eventを基にしたインターフェースが数多く存在し、そちらの方がイベントの情報を詳細に含んでいたりします。Eventを基にしたインターフェースを便宜上派生インターフェースと呼ぶことにしましょう。


たとえば、Event('click')と派生インターフェースMouseEvent('click')はどちらもクリックイベントを表します。

// どちらも同じような動作をする

target.dispatchEvent( new Event('click') );
target.dispatchEvent( new MouseEvent('click') );


ただし、派生インターフェースの方が多くのメンバを持っています。派生インターフェースでしか得られない情報としてはイベントの座標情報などがありますが、そうした情報が必要ではないのであればおそらくどちらを使ってもいいのだと思います。

注意点

javascriptでは独自の名前を付けたカスタムイベントを作成することが出来ます。しかし、この機能のせいでイベント名が間違っていても無視されます。例えば、clickイベントを間違ってonclickとしてイベントリスナーに登録してもエラーを吐いてくれません。

// onclickをclickと間違えても何もエラーを吐いてくれない

elem.addEventListener('onclick', (e)=>{
    console.log("btn clicked");
});


イベントリスナーの登録に限らず、イベントを生成するときもイベント名についてのエラーが吐かれません。

// clckをclickと間違えてもエラーを吐いてくれない
let evnt = new Event('clck');
let evnt = new MouseEvent('clck');

参考

developer.mozilla.org

developer.mozilla.org