如何在JavaScript中創建自定義事件

核心要點

• JavaScript事件處理是所有客戶端應用程序的基礎，但它們與DOM元素相關聯，可能不夠靈活。 JavaScript自定義事件解決了這個問題，提供了更高的靈活性和易維護性。
• 創建JavaScript自定義事件包括將事件名稱、詳細信息和選項傳遞給新的CustomEvent對象。創建後，可以使用dispatchEvent方法在特定元素上分派此事件。
• 多個處理程序可以訂閱自定義事件，從而可以根據事件執行不同的操作。 Chrome、Firefox和Opera支持自定義事件，一些JavaScript庫也提供支持。

JavaScript事件處理是所有客戶端應用程序的基礎。當目標元素（例如按鈕點擊、鼠標移動、表單提交等）上發生事件時，將執行處理程序函數。一個事件對像被傳遞給處理程序，該對象提供各種屬性和許多方法來阻止默認操作。一個缺點是事件與DOM元素緊密相連。考慮一個簡單的表單，它接受用戶的留言：

<code class="language-html"><label for="msg">你的留言</label><input type="text" id="msg"><button type="submit" form="msgbox">发送</button>
<form id="msgbox"></form></code>

當提交該表單時，我們可以編寫一個處理程序將留言回顯到屏幕上，例如：

<code class="language-javascript">document.getElementById("msgbox").addEventListener("submit", function(e) {
    e.preventDefault();
    var msg = e.currentTarget.getElementById("msg").value.trim();
    if (msg) {
        alert(msg);
    }
}, false);</code>

如果我們還想將留言發送為推文、將其存儲在服務器上或執行其他操作呢？對於現有的事件委託方法，我們有兩個選擇：

1. 在現有處理程序中添加更多代碼。 這不夠靈活，因為每次添加、更改或刪除功能時，都需要更新和測試處理程序函數。發布的留言可能有數十種用途，而我們試圖將它們全部應用於同一代碼塊中。

2. 為每種用途創建更多事件處理程序。 這將產生更優雅的代碼，但會導致維護問題。首先，每個函數都必須執行類似的操作來提取和驗證留言。如果我們需要更改表單怎麼辦？只需重命名ID就需要更改每個訂閱者的事件處理代碼。

如果我們可以在發布有效留言時簡單地觸發一個自定義“newMessage”事件，那不是很好嗎？如果我們可以監控document或body標籤而不是引用特定表單節點，那就更好了。自定義事件正是允許我們這樣做。觸發自定義事件很簡單；我們將名稱、詳細信息和選項傳遞給新的CustomEvent對象：

<code class="language-javascript">var event = new CustomEvent(
    "newMessage", 
    {
        detail: {
            message: "Hello World!",
            time: new Date(),
        },
        bubbles: true,
        cancelable: true
    }
);</code>

在此示例中，“newMessage”是自定義事件類型。第二個參數是一個具有三個屬性的對象：

• detail：一個子對象，提供有關事件的自定義信息。在此示例中，我們添加了留言和時間。
• bubbles：如果為true，事件將冒泡到觸發事件的元素的祖先。
• cancelable：如果為true，可以使用事件對象的stopPropagation()方法取消事件。

現在，我們需要在特定元素上分派此事件，例如：

<code class="language-html"><label for="msg">你的留言</label><input type="text" id="msg"><button type="submit" form="msgbox">发送</button>
<form id="msgbox"></form></code>

任何數量的處理程序都可以使用以下代碼訂閱此事件：

<code class="language-javascript">document.getElementById("msgbox").addEventListener("submit", function(e) {
    e.preventDefault();
    var msg = e.currentTarget.getElementById("msg").value.trim();
    if (msg) {
        alert(msg);
    }
}, false);</code>

演示頁面

此示例演示了該技術：查看自定義事件演示頁面。標準事件處理程序查找上面HTML表單的提交。該函數獲取當前留言，並假設它有效，則分派新的“newMessage”事件。

<code class="language-javascript">var event = new CustomEvent(
    "newMessage", 
    {
        detail: {
            message: "Hello World!",
            time: new Date(),
        },
        bubbles: true,
        cancelable: true
    }
);</code>

處理程序現在可以訂閱“newMessage”事件。僅當存在有效留言時才會觸發事件，並且由於bubbles設置為true，因此該事件可以應用於表單或其任何祖先，例如根document，例如：

<code class="language-javascript">document.getElementById("msgbox").dispatchEvent(event);</code>

留言本身可以從事件對象的detail.message屬性中提取。

瀏覽器兼容性

在撰寫本文時，Chrome、Firefox和Opera支持CustomEvent對象。它在Safari的夜間版本中可用，因此很可能很快就會出現在該瀏覽器中。 IE9及以下版本不支持該對象。幸運的是，幾個JavaScript庫支持自定義事件委託，因此請繼續關注SitePoint，以便很快獲得跨瀏覽器解決方案。

(此處省略了FAQs部分，因為與偽原創目標不符，且篇幅過長。)

以上是如何在JavaScript中創建自定義事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！