JavaScript - 自定义事件
自定义事件
JavaScript 中的自定义事件定义并处理应用程序内的自定义交互或信号。它们在代码的各个部分之间建立通信机制:一个部分可以通知其他部分特定的事件或更改;从而增强程序的功能。
通常，用户会结合 Event 和 CustomEvent 接口使用自定义事件。以下是其功能的详细分解:
| 概念 | 描述 |
|---|---|
| 自定义事件 | JavaScript 中的 CustomEvent 构造函数通过定义用户特定的事件来促进应用程序各个部分之间的通信。此类自定义事件表现为此构造函数的实例。 |
| CustomEvent 构造函数 | 内置 JavaScript 构造函数使用两个参数创建自定义事件:事件类型、字符串和可选配置对象;例如，可以使用可选的 detail 属性提供补充数据。 |
| dispatchEvent 方法 | DOM 元素上可用的一种用于分派自定义事件的方法。它会触发指定元素上该事件类型的所有监听器的执行。 |
| addEventListener 方法 | DOM 元素上可用的一种用于将事件监听器函数附加到事件类型的方法。当元素上调度指定事件时，会执行监听器函数。 |
| 事件类型 | 用于标识事件类型的字符串。自定义事件可以使用任何用户定义的字符串作为其类型。 |
| 事件处理 | 监听和响应事件是一个主动过程。它主要涉及在自定义上下文中为特定事件类型创建监听器，并随后定义这些事件发生时将发生的精确操作。 |
| 发布/订阅模式 | 在此设计模式中，系统组件之间无需直接引用即可间接通信。通过利用自定义事件，可以实现发布/订阅模式，使应用程序的各个部分能够订阅特定事件并做出相应的响应。 |
| detail 属性 | 创建自定义事件时，配置对象中的可选属性。它允许您将附加数据(作为对象)与事件一起传递。 |
示例:基本自定义事件
在此示例中，我们启动一个名为"myCustomEvent"的自定义事件并渲染一个关联按钮。使用 addEventListener 方法，我们跟踪由此按钮触发的事件。点击按钮后，我们的操作将分派自定义事件;随后发出"自定义事件已触发!"的提示消息。
<!DOCTYPE html>
<html>
<body>
<button id="triggerBtn">Trigger Event</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，它是一个接口，扩展了主事件。这里将演示 detail 属性，它允许我们设置其他数据。自定义事件名称为"myCustomEventWithData"，并带有一条与之关联的消息。此自定义事件将在点击按钮时分派。点击此按钮时，将触发此事件，并在屏幕上显示设置的消息。
<!DOCTYPE html>
<html>
<body>
<button id="triggerBtn">Trigger Custom Event</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>
总结创建自定义事件的步骤，我们首先创建一个事件或自定义事件，使用 addEventListener(最好)添加监听器，然后使用 dispatchEvent 方法触发或分派该事件。
