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 方法觸發或分發事件。

列印頁面