核心要點(diǎn)

• JavaScript事件處理是所有客戶端應(yīng)用程序的基礎(chǔ)，但它們與DOM元素相關(guān)聯(lián)，可能不夠靈活。JavaScript自定義事件解決了這個(gè)問(wèn)題，提供了更高的靈活性和易維護(hù)性。
• 創(chuàng)建JavaScript自定義事件包括將事件名稱、詳細(xì)信息和選項(xiàng)傳遞給新的CustomEvent對(duì)象。創(chuàng)建后，可以使用dispatchEvent方法在特定元素上分派此事件。
• 多個(gè)處理程序可以訂閱自定義事件，從而可以根據(jù)事件執(zhí)行不同的操作。Chrome、Firefox和Opera支持自定義事件，一些JavaScript庫(kù)也提供支持。

JavaScript事件處理是所有客戶端應(yīng)用程序的基礎(chǔ)。當(dāng)目標(biāo)元素（例如按鈕點(diǎn)擊、鼠標(biāo)移動(dòng)、表單提交等）上發(fā)生事件時(shí)，將執(zhí)行處理程序函數(shù)。一個(gè)事件對(duì)象被傳遞給處理程序，該對(duì)象提供各種屬性和許多方法來(lái)阻止默認(rèn)操作。一個(gè)缺點(diǎn)是事件與DOM元素緊密相連?？紤]一個(gè)簡(jiǎn)單的表單，它接受用戶的留言：

<label for="msg">你的留言</label><input type="text" id="msg"><button type="submit" form="msgbox">發(fā)送</button>
<form id="msgbox"></form>

當(dāng)提交該表單時(shí)，我們可以編寫(xiě)一個(gè)處理程序?qū)⒘粞曰仫@到屏幕上，例如：

document.getElementById("msgbox").addEventListener("submit", function(e) {
    e.preventDefault();
    var msg = e.currentTarget.getElementById("msg").value.trim();
    if (msg) {
        alert(msg);
    }
}, false);

如果我們還想將留言發(fā)送為推文、將其存儲(chǔ)在服務(wù)器上或執(zhí)行其他操作呢？對(duì)于現(xiàn)有的事件委托方法，我們有兩個(gè)選擇：

1. 在現(xiàn)有處理程序中添加更多代碼。 這不夠靈活，因?yàn)槊看翁砑?、更改或刪除功能時(shí)，都需要更新和測(cè)試處理程序函數(shù)。發(fā)布的留言可能有數(shù)十種用途，而我們?cè)噲D將它們?nèi)繎?yīng)用于同一代碼塊中。

2. 為每種用途創(chuàng)建更多事件處理程序。 這將產(chǎn)生更優(yōu)雅的代碼，但會(huì)導(dǎo)致維護(hù)問(wèn)題。首先，每個(gè)函數(shù)都必須執(zhí)行類(lèi)似的操作來(lái)提取和驗(yàn)證留言。如果我們需要更改表單怎么辦？只需重命名ID就需要更改每個(gè)訂閱者的事件處理代碼。

如果我們可以在發(fā)布有效留言時(shí)簡(jiǎn)單地觸發(fā)一個(gè)自定義“newMessage”事件，那不是很好嗎？如果我們可以監(jiān)控document或body標(biāo)簽而不是引用特定表單節(jié)點(diǎn)，那就更好了。自定義事件正是允許我們這樣做。觸發(fā)自定義事件很簡(jiǎn)單；我們將名稱、詳細(xì)信息和選項(xiàng)傳遞給新的CustomEvent對(duì)象：

var event = new CustomEvent(
    "newMessage", 
    {
        detail: {
            message: "Hello World!",
            time: new Date(),
        },
        bubbles: true,
        cancelable: true
    }
);

在此示例中，“newMessage”是自定義事件類(lèi)型。第二個(gè)參數(shù)是一個(gè)具有三個(gè)屬性的對(duì)象：

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

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

<label for="msg">你的留言</label><input type="text" id="msg"><button type="submit" form="msgbox">發(fā)送</button>
<form id="msgbox"></form>

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

document.getElementById("msgbox").addEventListener("submit", function(e) {
    e.preventDefault();
    var msg = e.currentTarget.getElementById("msg").value.trim();
    if (msg) {
        alert(msg);
    }
}, false);

演示頁(yè)面

此示例演示了該技術(shù)：查看自定義事件演示頁(yè)面。標(biāo)準(zhǔn)事件處理程序查找上面HTML表單的提交。該函數(shù)獲取當(dāng)前留言，并假設(shè)它有效，則分派新的“newMessage”事件。

var event = new CustomEvent(
    "newMessage", 
    {
        detail: {
            message: "Hello World!",
            time: new Date(),
        },
        bubbles: true,
        cancelable: true
    }
);

處理程序現(xiàn)在可以訂閱“newMessage”事件。僅當(dāng)存在有效留言時(shí)才會(huì)觸發(fā)事件，并且由于bubbles設(shè)置為true，因此該事件可以應(yīng)用于表單或其任何祖先，例如根document，例如：

document.getElementById("msgbox").dispatchEvent(event);

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

瀏覽器兼容性

在撰寫(xiě)本文時(shí)，Chrome、Firefox和Opera支持CustomEvent對(duì)象。它在Safari的夜間版本中可用，因此很可能很快就會(huì)出現(xiàn)在該瀏覽器中。IE9及以下版本不支持該對(duì)象。幸運(yùn)的是，幾個(gè)JavaScript庫(kù)支持自定義事件委托，因此請(qǐng)繼續(xù)關(guān)注SitePoint，以便很快獲得跨瀏覽器解決方案。

(此處省略了FAQs部分，因?yàn)榕c偽原創(chuàng)目標(biāo)不符，且篇幅過(guò)長(zhǎng)。)

以上是如何在JavaScript中創(chuàng)建自定義事件的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！