JavaScript 中的自定义事件定义并在应用程序内部处理自定义交互或信号。它们在代码的不同部分之间建立了一种通信机制：一部分可以通知其他部分有关特定事件或变化的发生，从而增强了程序的功能。
通常情况下，用户结合使用 Event 和 CustomEvent 接口来创建自定义事件。以下是对它们功能的详细分解：
概念描述
| 概念 |
描述 |
| 自定义事件 |
在 JavaScript 中，CustomEvent 构造函数通过定义用户特定事件来促进应用程序各部分之间的通信。此类自定义事件作为此构造函数的实例出现。 |
| CustomEvent 构造函数 |
此内置的 JavaScript 构造函数用于创建自定义事件，使用两个参数：事件类型（字符串）和一个可选的配置对象；例如，可选的 detail 属性可用于提供附加数据。 |
| dispatchEvent 方法 |
是 DOM 元素上的方法，用于分发自定义事件。它触发指定元素上该事件类型的监听器的执行。 |
| addEventListener 方法 |
是 DOM 元素上的方法，用于将事件监听函数附加到事件类型。当指定事件在元素上分发时，监听函数将被执行。 |
| 事件类型 |
标识事件类型的字符串。自定义事件可以具有任何用户定义的字符串作为其类型。 |
| 事件处理 |
监听并响应事件是一个主动过程。它主要涉及在自定义上下文中为特定事件类型创建监听器，并定义当这些事件发生时将执行的确切操作。 |
| 发布/订阅模式 |
在此设计模式中，系统组件通过间接的方式并且没有直接引用彼此进行通信。通过使用自定义事件，可以实现发布/订阅模式，使应用程序的不同部分能够订阅特定事件并相应地做出反应。 |
| detail 属性 |
创建自定义事件时配置对象中的一个可选属性。它允许您通过事件传递附加数据（作为对象）。 |
示例：基本自定义事件
在本示例中，我们初始化一个名为 'myCustomEvent' 的自定义事件，并呈现一个关联的按钮。使用 addEventListener 方法跟踪此按钮触发的事件。当点击按钮时，我们的操作将分发自定义事件；随后弹出一个消息 “Custom event triggered!”
<!DOCTYPE html>
<html>
<body>
<button id="triggerBtn">触发事件</button>
<script>
const customEvent = new Event('myCustomEvent');
document.getElementById('triggerBtn').addEventListener('click',
function() {
document.dispatchEvent(customEvent);
});
document.addEventListener('myCustomEvent', function() {
alert('Custom event triggered!');
});
</script>
</body>
</html>
示例：带有数据的自定义事件
在本示例中，我们将使用 CustomEvent 接口，该接口扩展了基本的 Event。这里将演示 detail 属性，它允许我们设置附加的数据。自定义事件名称为 'myCustomEventWithData' 并且将有一个关联的消息。此自定义事件将在点击按钮时分发。当点击此按钮时，此事件将被触发，并且设置的消息将在屏幕上显示为提示。
<!DOCTYPE html>
<html>
<body>
<button id="triggerBtn">触发自定义事件</button>
<script>
const eventData = { message: 'Hello from custom event!' };
const customEvent = new CustomEvent('myCustomEventWithData',
{ detail: eventData });
document.getElementById('triggerBtn').addEventListener('click',
function() {
document.dispatchEvent(customEvent);
});
document.addEventListener('myCustomEventWithData',
function(event) {
alert('Custom event triggered with data: ' + event.detail.message);
});
</script>
</body>
</html>
示例：基于条件的事件分发
本示例阐明了一个场景：事件分发严重依赖于一个变量（v），基于条件决定。它强调了应用程序动态使用自定义事件，取决于特定条件。本例涉及根据 v 的值分发 'TutorialEvent' 或 'TutorialEvent2'；相应地，事件监听器根据这一选择作出反应。
<!DOCTYPE html>
<html>
<body>
<script>
var v='tutorialspoint';
const event = new Event("TutorialEvent");
const event2 = new Event("TutorialEvent2");
document.addEventListener('TutorialEvent', ()=>{
alert("Welcome to Tutorialspoint Event")
});
document.addEventListener('TutorialEvent2', ()=>{
alert("Welcome to Event 2")
});
if(v == 'tutorialspoint'){
document.dispatchEvent(event);
}
else{
document.dispatchEvent(event2);
}
</script>
</body>
</html>
总结创建自定义事件的步骤：首先创建事件或 CustomEvent，然后使用 addEventListener（优选）添加监听器，最后使用 dispatchEvent 方法触发或分发事件。