ホームページ > ウェブフロントエンド > jsチュートリアル > ブラウザ内のカスタムイベント:あなたが必要としていなかった便利なツール

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

Susan Sarandon
リリース: 2025-01-28 04:33:09
オリジナル
737 人が閲覧しました

Custom Events in the Browser: A Handy Tool You Didn

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

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

実際の例で説明しましょう。私は、複数のモジュールと独立したロジックを使用して、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>
ログイン後にコピー
このアプローチに感謝している
  1. カスタムイベントは、私の拡張機能におけるクロスモジュール通信のためのクリーンで効率的なソリューションを提供しました。 コンテキストや状態管理ライブラリなどの反応固有のメカニズムの必要性を回避し、Webアプリケーションでの複雑なコミュニケーションの課題に対するシンプルでエレガントなアプローチを提供しました。 これが他の人に役立つことを願っています!

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート