什麼是事件接聽程式？
事件接聽程式是 JavaScript 中的一個函數，它等待事件發生，然後對其進行回應。JavaScript 是一種開發人員用來建立互動式網頁的程式設計語言。JavaScript 的事件接聽程式函數可讓您建立對滑鼠點選、鍵盤點擊和視窗大小調整等事件的自訂回應。等待和回應即時事件的程式設計範例稱為事件處理。
事件接聽程式函數的語法是什麼？
事件接聽程式函數與其他 JavaScript 函式共用類似的特徵。啟用時，該函數會採取必要的動作來處理事件。例如，事件接聽程式函數可變更顯示的文字、從註冊表單收集資訊，或將資料存放在資料庫中。
事件接聽程式語法
事件接聽程式函數遵循適當的 JavaScript 語法，如下列範例所示。
function RespondMouseClick() {
document.getElementById("textdisplay1").innerHTML += "MouseClick happened" ;
}
此範例顯示了 RespondMouseClick 事件接聽程式函數。編寫函數名稱以反映事件接聽程式的用途很常見。在函數中，您可以撰寫程式碼，以便在事件發生時執行特定動作。在此範例中，函數將文字發生了 MouseClick 附加至 HTML 元素 textdisplay1。
事件處理常式語法
或者，您可以使用事件處理常式函數，來回應已啟用的事件，如下列範例所示。
function eventHandler(event) {
if (event.type === "fullscreenchange") {
console.log (“full screen toggle”);
} else {
console.log (“full screen error”);
}
}
這讓您使用一個功能，即可管理來自特定元素的多種類型的事件。
例如，您可以註冊事件接聽程式，以處理事件型應用程式上的所有類型的區塊鏈事件。 如需詳細資訊，請參閱使用 Amazon Managed Blockchain 建置事件型應用程式的相關資訊。
如何新增事件接聽程式？
只有在將事件接聽程式新增至相應的 JavaScript 元素後，才會啟用事件接聽程式。若要執行該操作，您可以使用如下所示語法：
- element.addEventListener(event, listener);
- element.addEventListener(event, listener, useCapture);
- element.addEventListener(event, listener, options);
例如，開發人員可呼叫下列函數，將點按事件接聽程式繫結至按鈕元素。
btn.addEventListener("click", RespondMouseClick);
您還可以將多個事件接聽程式新增至特定的事件物件，而不會覆寫現有的事件處理常式。
例如，Amazon Web Services (AWS) 允許開發人員鏈結 AWS.Request 物件上的多個回呼。如需詳細資訊，請參閱如何在 AWS 上使用請求物件事件接聽程式。
用於新增事件的參數
以下是之前語法中參數的解釋：
- 事件參數是任何有效的 JavaScript 事件，例如點按、變更、滑鼠懸停、按下按鍵和載入。
- 接聽程式參數是為回應特定事件而建立的事件回呼或 JavaScript 函數。
- useCapture 參數是指示事件傳播模式的選用參數。該參數接受布林值，其中 true 啟用擷取，而 false 則啟用反昇。此參數的預設值設定為 false。
- 選項參數由多個選用值組成，包括擷取模式和拒絕訊號，代表接聽程式的行為。
如何移除事件接聽程式？
事件接聽程式會保持作用中狀態，直至您從關聯的 JavaScript 元素中將其移除。您可以使用下列語法來執行此操作。
element.removeEventListener(type, listener, useCapture);
事件接聽程式移除參數與您用於新增事件接聽程式的參數類似。移除事件接聽程式時，必須指定相同的 type、listener 以及 useCapture 參數。如果不這樣做，事件接聽程式會保持作用中狀態，並繼續觸發未來的事件。
例如，您可以使用下列程式碼來新增事件。
button.addEventListener("click", RespondMouseClick, true);
但套用下列程式碼無法移除事件接聽程式。這是因為 useCapture 值與使用按鈕物件註冊的值不同。
button.removeEventListener("click", RespondMouseClick, false);
若要成功移除事件並防止其被觸發，您可以使用下列程式碼。
button.removeEventListener("click", RespondMouseClick, true);
巢狀事件接聽程式函數如何運作？
巢狀事件接聽程式是新增至不同階層之 HTML 元素的事件處理常式。
在下列 HTML 範例中，文件擁有基礎父項元素，而父項擁有子項。
<div class="document">
<div class="parent">
<div class="child"></div>
</div>
</div>
複雜的 Web 應用程式可能具有多個父項-子項層，以及各自的事件接聽程式函數。當發生特定事件時，它會以特定順序在不同層觸發事件接聽程式。例如，按一下子項按鈕，會將事件傳播至擷取滑鼠點按的所有處理常式。
事件可透過兩種模式傳播，即反昇和擷取。
事件反昇
反昇是處理 JavaScript 事件的預設模式。它會將事件從最內層傳播至最外層。
例如，使用者可將滑鼠懸停於子區段文字方塊上。然後，應用程式可按下列順序傳遞事件：
- 子項中的事件接聽程式會處理滑鼠懸停事件。
- 然後，父項事件接聽程式會處理事件，並將控制權傳遞給文件的事件接聽程式。
若要設定事件反昇，請使用下列語法：
- element.addEventListener(event, listener, [false]);
- element.addEventListener(event, listener);
事件擷取
事件擷取是 JavaScript 中的一種特殊事件處理模式，其中事件從最外層傳播至最內層。一旦事件到達內層的目標元素，事件處理模式就會變更為反昇。然後，反昇會將事件向外傳播至最上層。
例如，使用者可點按子項按鈕並啟動下列順序：
- 文件事件接聽程式會處理滑鼠點按事件，然後是父項事件處理常式。
- 事件到達目標元素，即按鈕。該按鈕的事件接聽程式會處理事件。
- 事件處理會從擷取切換至反昇模式。
- 相同的滑鼠點按事件在文件結束之前，會觸發父級的事件處理常式。
如何在反昇和擷取之間進行選擇
反昇和擷取可讓您以不同的方式處理事件。很少使用反昇，因為擷取足以處理應用程式中的大多數事件。
當您在反昇和擷取之間做出決定時，應考慮事件傳播流程，以及它如何與應用程式的程式設計邏輯保持一致。
例如，考慮由兩個子項元素組成的父項表單。當第二個元素發生事件時，第一個元素需要立即更新。在這種情況下，您應使用擷取模式。它可確保父項事件接聽程式會處理事件並更新第一個元素。然後，它會將控制權傳遞給第二個子項元素的事件接聽程式。
如何停止巢狀事件接聽程式函數中的事件傳播？
事件在以巢狀接聽程式排列到達結束目的地之前會進行傳播。必須使用特定的方法來阻止事件進一步傳播。
下列方法會在事件接聽程式中停止事件。
event.stopPropagation();
例如，如果以子按鈕呼叫 StopPropagation，滑鼠點按事件不會傳播到父項和文件層級。因此，不會觸發更高級別的事件接聽程式。
停止所有事件傳播
StopPropagation 只會停止目前類型的事件傳播。如果物件已向其註冊不同類型的事件接聽程式，儘管 StopPropagation 呼叫，但仍會觸發。
若要停止與特定物件相關的所有事件，您可以使用如下所示 StopImmediatePropagation 方法。
event.stopImmediatePropagation();
當一個事件接聽程式呼叫 StopImmediatePropagation 時，不會觸發與該物件關聯的其他事件接聽程式。
AWS 如何支援您的 JavaScript 需求？
Amazon Web Services (AWS) 提供 AWS SDK for JavaScript，因此您可以透過程式庫和 API 輕鬆地在應用程式中使用服務。
您可以使用 SDK 來開發伺服器端、Web 和行動 Web 應用程式。SDK 支援 JavaScript 執行期，Node.JS 和 React Native，以及跨執行期。這可讓開發人員在不同平台上執行相同的用戶端服務套件。
以下是使用 SDK 的其他優勢：
- SDK 以 TypeScript 撰寫。這帶來了靜態類型檢查以及類別和模組支援等優勢。
- SDK 提供中介軟體堆疊，可讓您引入自訂動作。
- SDK 具有模組化架構。這可讓您僅使用必要的套件來最佳化應用程式效能。
立即註冊 AWS 帳戶，開始使用 JavaScript 應用程式。
