[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で任意のカスタムイベントを送受信することができました。

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

イベントの作成と起動 - イベントリファレンス | MDN

この記事では、 DOM イベントを作成して処理する方法を説明します。このようなイベントは、一般に、ブラウザー自体によって起動されたイベントとは対照的に、合成イベントと呼ばれます。

developer.mozilla.org