JavaScript - 自定事件：初學者的指南

你好，未來的 JavaScript 巔峰大師！今天，我們將踏上一段令人興奮的旅程，探索自定事件的神秘世界。別擔心你對編程是新手——我將成為你的友好導遊，我們將一步一步地攻克這個主題。所以，拿起你喜歡的飲料，放鬆身心，讓我們一起深入探討吧！

JavaScript - Custom Events

自定事件是什麼？

在我們深入細節之前，讓我們先了解自定事件是什麼。想像你在一個派對上（請耐心聽我說，我保證這個比喻會有意義）。在這個派對上，某些事情自然會發生——人們到達，音樂播放，小吃被吃掉。這些就像是 JavaScript 內建的時間，例如點擊或按鍵。

但如果你想要創造一個特殊事件，比如舞蹈大賽或卡拉 OK 會話呢？這就是自定事件的用武之地！它們讓你可以創造自己獨特的事件，在代碼中被觸發和監聽。

為什麼使用自定事件？

自定事件非常有用於以下情況：

創建模塊化且解耦合的代碼
改進應用程序不同部分之間的通信
讓你的代碼更具有彈性和可擴展性

現在，讓我們捋起袖子，看一些例子吧！

範例：基本自定事件

讓我們從一個簡單的自定事件開始。我們將創建一個名為 "partyStarted" 的事件。

// 創建自定事件
let partyEvent = new Event('partyStarted');

// 添加事件監聽器
document.addEventListener('partyStarted', function() {
console.log('讓派對開始吧！');
});

// 觸發事件
document.dispatchEvent(partyEvent);

現在，讓我們來解析這段代碼：

我們創建了一個名為 partyEvent 的新 Event 對象。
我們在 document 上添加了一個事件監聽器，以監聽我們的 'partyStarted' 事件。
當事件被聽到時，它會將 "讓派對開始吧！" 輸出到控制台。
最後，我們派發事件，這會觸發我們的監聽器。

如果你運行這段代碼，你會在控制台看到 "讓派對開始吧！"。恭喜！你已經創建並使用了自己的第一個自定事件。

範例：帶數據的自定事件

現在，讓我們升級一個等級。如果我們想要與事件一起傳遞一些數據呢？這時 CustomEvent 就派上用場了！

// 創建一個帶數據的自定事件
let danceOffEvent = new CustomEvent('danceOff', {
detail: {
song: 'Stayin\' Alive',
dancer: 'John Travolta'
}
});

// 添加事件監聽器
document.addEventListener('danceOff', function(e) {
console.log(`是時候來場舞蹈大賽了！${e.detail.dancer} 正在跳 ${e.detail.song}`);
});

// 觸發事件
document.dispatchEvent(danceOffEvent);

在這個範例中：

我們創建了一個名為 danceOffEvent 的 CustomEvent。第二個參數是一個對象，我們可以在其中添加 detail 屬性，並傳遞我們想要的任何數據。
我們的事件監聽器現在接收一個事件對象 e，它包含了我們在 e.detail 中傳遞的自定數據。
當我們派發事件時，我們的監聽器使用傳遞的數據輸出消息。

運行這段代碼，你會看到： "是時候來場舞蹈大賽了！John Travolta 正在跳 Stayin' Alive"

範例：基於條件的事件派發

讓我們在事件派發時加入一些邏輯。我們將創建一個 "snacksGone" 事件，當我們沒有小吃時才會觸發。

let snacks = 5;

function eatSnack() {
if (snacks > 0) {
snacks--;
console.log(`好吃！還剩 ${snacks} 份小吃。`);
}

if (snacks === 0) {
let snacksGoneEvent = new Event('snacksGone');
document.dispatchEvent(snacksGoneEvent);
}
}

document.addEventListener('snacksGone', function() {
console.log('哦不！我們的小吃吃完了。該訂購更多了！');
});

// 我們來吃一些小吃吧！
for (let i = 0; i < 6; i++) {
eatSnack();
}

這裡發生了什麼：

我們從 5 份小吃開始。
eatSnack 函數減少小吃的數量並記錄還剩多少。
如果我們吃完了小吃，它會創建並派發 'snacksGone' 事件。
我們有一個等待 'snacksGone' 的事件監聽器，當觸發時會記錄一條消息。
我們使用一個循環來吃 6 份小吃（比我們有的多一份）。

當你運行這段代碼時，你會看到小吃數量逐漸減少，當它降到 0 時，你會看到 "哦不！" 的消息。

總結

好了，各位！你剛剛學會了 JavaScript 中自定事件的基礎。讓我們回顧一下我們使用的主要方法：

方法	描述
`new Event()`	創建一個新事件
`new CustomEvent()`	創建一個可以攜帶數據的新自定事件
`addEventListener()`	監聽一個事件
`dispatchEvent()`	觸發一個事件

自定事件是你在 JavaScript 工具箱中的強大工具。它們讓你可以創建有動態性、響應性和模塊化的代碼。隨著你 JavaScript 旅程的繼續，你會發現許多創造性的方式來使用自定事件解決問題和改進你的應用程序。

記住，編程就像學習跳舞一樣——需要練習，但一旦你掌握了它，你會很快進入狀態。繼續編程，保持好奇心，最重要的是，玩得開心！

Credits: Image by storyset