快捷導(dǎo)航

詳解如何在JavaScript中自定義事件

更新時間：2024年04月18日 09:32:38 作者：Moment

在 JavaScript 中,事件是非常核心的概念,它們使得我們可以設(shè)計交互性強的網(wǎng)頁應(yīng)用,本文主要和來大家聊聊如何在JavaScript中自定義事件,感興趣的可以了解下

想象一下，你正在構(gòu)建一個復(fù)雜的網(wǎng)絡(luò)應(yīng)用程序。預(yù)構(gòu)建的事件，如點擊和提交固然有用，但如果你需要更具體的功能怎么辦？這就是自定義事件的用武之地，它是一種讓你的 JavaScript 代碼創(chuàng)建并觸發(fā)自己的事件的方法，允許應(yīng)用程序不同部分之間進行更細致的通信。

理解 JavaScript 中的事件

在 JavaScript 中，事件是非常核心的概念，它們使得我們可以設(shè)計交互性強的網(wǎng)頁應(yīng)用。事件本質(zhì)上是瀏覽器或用戶自身的某種行為響應(yīng)，這些行為可以是用戶的點擊、滾動、鍵入等，也可以是瀏覽器的加載完成、視窗調(diào)整等。

事件類型

JavaScript 的事件種類繁多，主要可以分為以下幾類：

用戶事件：

click：用戶點擊元素。
mouseenter：光標移動到元素上。
mouseleaave：光標離開元素。
keydown、keypress、keyup：用戶與鍵盤交互。
submit：表單提交。

瀏覽器事件：

load：頁面完全加載后觸發(fā)。
resize：瀏覽器窗口大小改變時觸發(fā)。
scroll：滾動瀏覽器窗口或元素時觸發(fā)。

資源事件：

error：加載腳本、樣式表、圖片等資源失敗時觸發(fā)。

事件模型

JavaScript 的事件模型包括三個階段：

捕獲階段：事件從 document 對象傳導(dǎo)到事件目標的路徑上的每個節(jié)點都會觸發(fā)事件。
冒泡階段：事件到底指定的目標節(jié)點。
事件從事件目標傳回 document 對象的路徑上的每個節(jié)點都會觸發(fā)事件。

大多數(shù)事件處理都是在冒泡階段執(zhí)行，因為這可以讓最具體的節(jié)點先接收到事件，然后是較不具體的節(jié)點。

事件處理器

事件處理器是響應(yīng)時間的函數(shù)。JavaScript 提供幾種方式來處理事件：

HTML 事件處理屬性：

<button onclick="alert('moment!')">Moment!</button>

DOM 屬性：

const button = document.querySelector("button");

button.onclick = function () {
  alert("Moment！");
};

事件監(jiān)聽器：

const button = document.querySelector("button");

button.addEventListener("click", function () {
  alert("Moment！");
});

事件監(jiān)聽器的優(yōu)勢在于可以為同一事件添加多個監(jiān)聽器，并且可以更精細地控制事件處理的階段（捕獲或冒泡）。

移除事件監(jiān)聽器

為了防止內(nèi)存泄漏，有時需要移除不再需要的事件監(jiān)聽器：

const handleClick = function () {
  alert("Moment!");
};
button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

除了上述提到的內(nèi)容外，當(dāng)內(nèi)置的事件無法滿足需求時，我們還可以創(chuàng)建自定義事件。

為什么要自定義事件

自定義事件在復(fù)雜的 Web 應(yīng)用程序中扮演著至關(guān)重要的角色，因為它們提供了一種靈活的方式來處理那些超出標準事件模型范疇的交互。這里詳細解釋一下上述提到的自定義事件的幾個優(yōu)點：

特定性（Specificity）：自定義事件允許我們定義針對應(yīng)用程序特定功能的事件。這種特定性意味著事件不僅能準確描述發(fā)生的事情，而且與應(yīng)用程序的業(yè)務(wù)邏輯緊密相關(guān)。

購物車：在電子商務(wù)網(wǎng)站上，每當(dāng)用戶添加商品到購物車時，觸發(fā)一個 itemAdded 事件。此事件可以攜帶關(guān)于新增商品的詳細信息，如商品 ID、數(shù)量和價格。
游戲：在一個游戲應(yīng)用中，每當(dāng)玩家完成一個等級，觸發(fā)一個 levelCompleted 事件。這個事件可以包含關(guān)于玩家表現(xiàn)的數(shù)據(jù)，如得分、所用時間和獲得成就。

解耦（Decoupling）：在軟件架構(gòu)中，解耦是一種重要的設(shè)計原則，目的是減少應(yīng)用程序中不同部分之間的依賴關(guān)系。通過自定義事件，可以在不直接影響其他模塊的情況下，進行通信和數(shù)據(jù)傳遞。

表單提交：當(dāng)用戶提交表單時，表單組件可以發(fā)布一個 formSubmitted 事件，而不是直接調(diào)用后續(xù)處理邏輯（如驗證或保存數(shù)據(jù)）。一個獨立的監(jiān)聽器組件可以監(jiān)聽這一事件并處理后續(xù)邏輯，這樣表單提交處理就與具體的后續(xù)操作解耦了。
進度更新：在一個文件上傳應(yīng)用中，文件上傳邏輯可以觸發(fā)一個 uploadProgress 事件，進度條組件則可以監(jiān)聽這一事件來更新用戶界面，而無需直接與上傳邏輯耦合。

數(shù)據(jù)傳輸（Data Transfer）：自定義事件的一個重要功能是能夠攜帶數(shù)據(jù)。這是通過事件對象的 detail 屬性實現(xiàn)的，可以包含任何必要的信息。

社交應(yīng)用：在一個社交網(wǎng)絡(luò)應(yīng)用中，每當(dāng)用戶發(fā)布新動態(tài)時，可以觸發(fā)一個 newPost 事件，該事件的 detail 屬性可以包含發(fā)布的內(nèi)容、時間戳和其他元數(shù)據(jù)。
庫存管理：在庫存管理系統(tǒng)中，每當(dāng)庫存數(shù)量更新時，可以發(fā)布一個 inventoryUpdated 事件，其中 detail 屬性可以包含更新的商品 ID、變更后的數(shù)量和變更類型（增加或減少）。

通過使用自定義事件，開發(fā)者不僅能提高應(yīng)用的靈活性和可維護性，還能通過事件驅(qū)動的方式優(yōu)化應(yīng)用架構(gòu)，使其更加模塊化和可擴展。

如何在 JavaScript 中自定義事件

在 JavaScript 中，自定義事件允許開發(fā)者根據(jù)需要創(chuàng)建和觸發(fā)特定的事件。這一功能非常有用，尤其是在復(fù)雜的應(yīng)用程序中，它可以幫助實現(xiàn)不同組件間的松散耦合。以下是創(chuàng)建和使用自定義事件的詳細步驟和代碼示例。

1. 創(chuàng)建自定義事件

JavaScript 提供了 CustomEvent 構(gòu)造函數(shù)，用于創(chuàng)建任何類型的自定義事件。這個構(gòu)造函數(shù)接受兩個參數(shù)：事件的名稱和一個配置對象，配置對象中可以設(shè)置事件的傳播行為和攜帶的數(shù)據(jù)。

const event = new CustomEvent("自定義事件名稱", options);

其中，options 對象包括：

bubbles: 布爾值，表示事件是否冒泡。
cancelable: 布爾值，表示事件是否可以被取消。
detail: 包含事件相關(guān)數(shù)據(jù)的對象。

2. 觸發(fā)事件

使用 dispatchEvent()方法觸發(fā)事件。這個方法屬于 EventTarget，它可以是幾乎所有的 DOM 元素、document 對象、或者 window 對象。

觸發(fā)自定義事件的代碼如下所示：

element.dispatchEvent(event);

3. 監(jiān)聽自定義事件

和監(jiān)聽普通 DOM 事件一樣，使用 addEventListener 來處理自定義事件。

element.addEventListener("自定義事件名稱", function (e) {
  console.log("Moment：", e.detail);
});

4.完整 demo

假設(shè)我們在一個網(wǎng)頁中有一個按鈕，當(dāng)點擊這個按鈕時，我們希望觸發(fā)一個名為 userLoggedIn 的自定義事件，并攜帶用戶信息作為事件的數(shù)據(jù)。

最終代碼如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="login">Login</button>

    <script>
      // 獲取按鈕元素
      const loginButton = document.getElementById("login");

      // 創(chuàng)建自定義事件
      const loginEvent = new CustomEvent("userLoggedIn", {
        bubbles: true, // 允許事件冒泡
        cancelable: true, // 允許事件被取消
        detail: { username: "Moment", userId: 1234 }, // 事件的詳細數(shù)據(jù)
      });

      // 監(jiān)聽自定義事件
      loginButton.addEventListener("userLoggedIn", function (e) {
        console.log("歡迎, " + e.detail.username + "!");
        console.log("你的 ID 是: " + e.detail.userId);
      });

      // 觸發(fā)事件的函數(shù)
      function triggerLogin() {
        loginButton.dispatchEvent(loginEvent);
      }

      // 添加點擊按鈕時觸發(fā)登錄事件的邏輯
      loginButton.addEventListener("click", triggerLogin);
    </script>
  </body>
</html>

在這個例子中，每當(dāng)用戶點擊 Login 按鈕時，userLoggedIn 事件就會被觸發(fā)，相關(guān)的監(jiān)聽器會執(zhí)行，并打印出用戶的名稱和 ID。

這種方式可以在你的應(yīng)用中自由地傳遞數(shù)據(jù)和消息，使不同的部分能夠以松散耦合的方式協(xié)作，極大地提高了代碼的可維護性和擴展性。

最終運行效果如下圖所示：

20240414083912