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

理解 JavaScript 中的事件

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

事件類型

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

用戶事件：

• click：用戶點(diǎn)擊元素。
• mouseenter：光標(biāo)移動(dòng)到元素上。
• mouseleaave：光標(biāo)離開(kāi)元素。
• keydown、keypress、keyup：用戶與鍵盤交互。
• submit：表單提交。

瀏覽器事件：

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

資源事件：

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

事件模型

JavaScript 的事件模型包括三個(gè)階段：

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

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

事件處理器

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

HTML 事件處理屬性：

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

DOM 屬性：

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

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

事件監(jiān)聽(tīng)器：

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

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

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

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

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

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

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

為什么要自定義事件

自定義事件在復(fù)雜的 Web 應(yīng)用程序中扮演著至關(guān)重要的角色，因?yàn)樗鼈兲峁┝艘环N靈活的方式來(lái)處理那些超出標(biāo)準(zhǔn)事件模型范疇的交互。這里詳細(xì)解釋一下上述提到的自定義事件的幾個(gè)優(yōu)點(diǎn)：

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

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

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

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

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

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

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

如何在 JavaScript 中自定義事件

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

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

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

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

其中，options 對(duì)象包括：

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

2. 觸發(fā)事件

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

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

element.dispatchEvent(event);

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

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

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

4.完整 demo

假設(shè)我們?cè)谝粋€(gè)網(wǎng)頁(yè)中有一個(gè)按鈕，當(dāng)點(diǎn)擊這個(gè)按鈕時(shí)，我們希望觸發(fā)一個(gè)名為 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 }, // 事件的詳細(xì)數(shù)據(jù)
      });

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

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

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

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

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

最終運(yùn)行效果如下圖所示：

到此這篇關(guān)于詳解如何在JavaScript中自定義事件的文章就介紹到這了,更多相關(guān)JavaScript自定義事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論