[TypeScript]Use eventos personalizados

Coisas que eu quero fazer
implementação
1. Enviar um evento
2. Receber um evento
Resultado
Sites que utilizei como referência

Coisas que eu quero fazer

Usaremos TypeScript para disparar eventos personalizados e, em seguida, usaremos esses eventos como gatilhos para processamento.

implementação

Enviar um evento

O código a seguir enviará o evento.

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

Substitua event_name por qualquer nome que desejar.

O conteúdo do objeto de detalhe pode ser modificado livremente.

Receber um evento

O evento recebido é o seguinte:

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

Substitua `event_name` pelo nome do evento que desencadeou o evento.

Ao acessar a propriedade detail usando `e.detail` sem especificar `as CustomEvent`, você receberá o erro ‘ A propriedade detail não existe no tipo Event’. (Esse erro não ocorre em JavaScript.)

Resultado

Consegui enviar e receber eventos personalizados arbitrários usando TypeScript.

Sites que utilizei como referência

DOM イベント - Web API | MDN

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