ブラウザ内のカスタムイベント：あなたが必要としていなかった便利なツール

最近、カスタムブラウザイベントのパワーを発見しました。これは、これまで探索したことのない驚くほど便利なツールです。 独自のカスタムイベントを作成してトリガーし、アプリケーション内でそれらを聞くことができます。 これにより、効率的なコミュニケーションの可能性が開かれます。

なぜカスタムイベントを使用するのですか？

実際の例で説明しましょう。私は、複数のモジュールと独立したロジックを使用して、Reactを使用してChrome拡張機能を開発していました。 堅牢なモジュール間通信方法が必要でした

拡張機能の詳細は機密ですが、自動車メーカー（トヨタ、フォード、メルセデス）向けのサービスを想像してください。それぞれが一意の処理を必要とするため、反応コンポーネントではなく、個別のロジックファイルが得られます。

、コンテキスト、またはredux/mobxなどの標準的な反応ツールは直接適用されませんでした。 useStateカスタムイベントがソリューションを提供しました

カスタムイベントの仕組み

カスタムイベントで、イベントを作成、発送、リッスンし、カスタムデータを渡すことができます。 コア構文は簡単です：

リスナーの追加：

window.addEventListener(type, listener);

：ケースに敏感な文字列（イベント名）。

• type：イベントが派遣されたときに実行される関数。 オプションの
オブジェクトを追加できます（詳細については、ドキュメントを参照してください）。
• イベントの派遣：listeneroptions<

：イベント名（

const event = new CustomEvent(eventName, { detail });
window.dispatchEvent(event);

in

in
• を一致させる必要があります）。 eventNametype：リスナーに渡されたデータを含むオブジェクト。これにより、カスタムイベントが非常に柔軟になります addEventListener
実世界の例：ReactおよびCustom Events
• 私のクロム拡張機能：detail

イベントリスナー（app.tsxでEffectを使用）：

1. イベントの派遣：どこからでも：

useEffect(() => {
    const handleCustomEvent = (event: CustomEvent) => {
        console.log(event.detail);
    };

    window.addEventListener(ADD_CUSTOM_EVENT, handleCustomEvent);

    return () => {
        window.removeEventListener(ADD_CUSTOM_EVENT, handleCustomEvent);
    };
}, []);

<code>*   `ADD_CUSTOM_EVENT`: A constant (prevents typos).
*   `handleCustomEvent`: Logs the event's `detail` object (in this simplified example).</code>

このアプローチに感謝している

2. カスタムイベントは、私の拡張機能におけるクロスモジュール通信のためのクリーンで効率的なソリューションを提供しました。 コンテキストや状態管理ライブラリなどの反応固有のメカニズムの必要性を回避し、Webアプリケーションでの複雑なコミュニケーションの課題に対するシンプルでエレガントなアプローチを提供しました。 これが他の人に役立つことを願っています！

以上がブラウザ内のカスタムイベント：あなたが必要としていなかった便利なツールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。