瀏覽器中的自定義事件：您沒有的方便工具知道您需要

最近，我發現了自定義瀏覽器事件的力量 - 我以前從未探索過的一種令人驚訝的方便工具。 您可以創建並觸發自己的自定義事件，然後在應用程序中聆聽它們。 這打開了有效的溝通可能性。

為什麼使用自定義事件？

>

>讓我們用一個現實世界的示例說明。我正在使用React開發一個Chrome擴展名，具有多個模塊和獨立邏輯，其中一些外部React組件（在獨立的打字稿文件中）。 我需要一個強大的模塊間通信方法。

雖然擴展名的細節是機密的，但請想像汽車製造商（豐田，福特，梅賽德斯）的服務。每個都需要獨特的處理，從而產生單獨的邏輯文件 - 而不是反應組件。 標準的反應工具，例如

，上下文或redux/mobx不直接適用。

> useState自定義事件提供了解決方案。

>

自定義事件的工作方式

>

>自定義事件讓您創建，派遣和聆聽事件，傳遞自定義數據。 核心語法很簡單：

>添加偵聽器：

<code class="language-javascript">window.addEventListener(type, listener);</code>

：一個case敏感的字符串（事件名稱）。

>
• type：派遣事件時執行的功能。 可以添加一個可選的
對象（有關詳細信息，請參見文檔）。
• > listener options
>派遣事件：>

：事件名稱（必須匹配

in

<code class="language-javascript">const event = new CustomEvent(eventName, { detail });
window.dispatchEvent(event);</code>

）。

>
• eventName：一個包含傳遞給偵聽器的數據的對象。這使自定義事件高度靈活。 type addEventListener
>現實世界示例：REACT和自定義事件
• detail在我的Chrome擴展中：

> event偵聽器（app.tsx中的useseffect）：

>

>派遣事件：

<code class="language-javascript">useEffect(() => {
    const handleCustomEvent = (event: CustomEvent) => {
        console.log(event.detail);
    };

    window.addEventListener(ADD_CUSTOM_EVENT, handleCustomEvent);

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

從任何地方：>

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

2. 為什麼我感謝這種方法 >自定義事件為我的擴展程序提供了一種干淨，有效的解決方案。 它繞過了對環境或狀態管理庫等特定於反應的機制的需求，從而為Web應用程序提供了一種簡單，優雅的方法來解決複雜的溝通挑戰。 我希望這對他人有幫助！
>

以上是瀏覽器中的自定義事件：您沒有的方便工具知道您需要的詳細內容。更多資訊請關注PHP中文網其他相關文章！