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>
		// Creates the new custom event.
		const customEvent = new Event('myCustomEvent');
		// Adds an event listener to the button.
		document.getElementById('triggerBtn').addEventListener('click', 
		function() {
			// Dispatches custom event on button click.
			document.dispatchEvent(customEvent);
		});
		// Add listener for the custom event.
		document.addEventListener('myCustomEvent', function() {
			alert('Custom event triggered!');
		});
	</script>
</body>
</html>

示例：带有数据的自定义事件

在此示例中，我们将使用 CustomEvent 接口，它扩展了主要的 Event。这里将演示 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 方法触发或分发事件。

打印页面