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