[TypeScript]カスタムイベントを使用する

やりたいこと

TypeScriptでカスタムイベントを発火して、イベントをトリガにして処理を行います。

実装

イベントの送信

以下のコードでイベントを送信させます。

const event = new CustomEvent("event_name", { detail: { val1: "value 1", val2: "value 2" } });
dispatchEvent(event);

“event_name”は任意の好きな名前に変更します。

detail objectの中身は自由に変更可能です。

イベントの受信

イベントの受信は以下の通りです。

addEventListener("event_name", (e) => {
        console.log ((e as CustomEvent).detail.val1+ (e as CustomEvent).detail.val2));
    })

“event_name”は発火させたイベント名に変更します。

結果

TypeScriptで任意のカスタムイベントを送受信することができました。

参考にさせていただいたサイト

DOM イベント - Web API | MDN

イベントは、コードの実行に影響を与える可能性のある「興味深い変化」をコードに通知するために発行されます。これは、マウス操作やウィンドウのサイズ変更などのユーザー操作や、環境の変化（バッテリー残量の低下や OS のメディアイベントなど）、その他の原因によって発行されます。

developer.mozilla.org