Javascript 简明教程

JavaScript - Custom Events

Custom Events

JavaScript 中的自定义事件定义和处理应用程序中的自定义交互或信号。它们建立了各种代码部分之间的通信机制：一部分可以通知其他部分特定事件或更改；因此增强了程序的功能。

通常，用户将自定义事件与 Event 和 CustomEvent 接口结合使用。以下是其功能的详细细分：

Concept

Description

Custom Event

JavaScript 中的 CustomEvent 构造器通过定义用户特定的事件来促进应用程序各个部分之间的通信。此类自定义事件显示为该构造函数的实例。

CustomEvent Constructor

内置的 JavaScript 构造器创建自定义事件，使用两个参数：事件类型，一个字符串，以及可选的配置对象；例如，可以使用可选的 detail 属性来提供补充数据。

dispatchEvent Method

DOM 元素上用于分派自定义事件的方法。它触发指定元素上该事件类型所有侦听器的执行。

addEventListener Method

DOM 元素上用于将事件侦听器函数附加到事件类型的方法。当在元素上分派指定事件时执行侦听器函数。

Event Types

标识事件类型的字符串。自定义事件可以具有任何用户定义的字符串作为其类型。

Event Handling

侦听和响应事件是一个主动过程。它主要涉及在自定义上下文中创建特定事件类型的侦听器，然后在发生这些事件时定义将发生的精确操作。

Pub/Sub Pattern

在此设计模式中，系统组件彼此间进行间接通信，且没有直接引用。通过使用自定义事件，可以实现发布/订阅模式，该模式使各种应用程序部分能够订阅特定事件并做出相应反映。

detail Property

创建自定义事件时，配置对象中的一个可选属性。它允许您随事件一同传递附加数据（作为对象）。

Example: Basic Custom Event

在此示例中，我们启动名为“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>

Example: Custom Event with Data

在本示例中，我们将使用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>

Example: Condition-based Event Dispatching

此示例阐明了一个场景：事件分发严格依赖于变量（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 方法触发或分发事件。