中文輸入法、文字複合 CompositionEvent 事件監聽

DOM 接口組合 IME (Input Method Editor) 在鍵盤上輸入漢語拼音或注音符號，用於輸入文字並將其轉換為其他語言的字符集。中文輸入時的監聽事件 compositionstart、compositionupdate、compositionend。平常對輸入框的 Event 監聽輸入框的文字變化，多會透會使用 keydown、keypress、keyup 等鍵盤事件來判斷。於 MDN 發現一個 CompositionEvent 表示用戶間接輸入文本（如使用輸入法）時發生的事件。

Composition Event 主要有「三個」監聽事件

compositonstart : 在輸入框內開啟中文輸入文字時觸發，表示「正在拼字」時觸發。

compositionupdate : 在向輸入框內中插入新字元時觸發，表示「正在拼字或選字時」時觸發。

compositionend : 在輸入框內「完成」或關閉時觸發，表示最後一刻送出至輸入框時觸發。

JavaScript 從 UIEvent 和 Event 繼承屬性、取得於中文輸入的事件監聽、主要 Event 有三個事件名稱可以監聽組合輸入的事件，下方的中文輸入實例測試或是自己訂製一個相關詞的案例。

const inputElement = document.querySelector("div.composition-event input[type='text']");
const Log_Textarea = document.querySelector("div.composition-event textarea");

function handleEvent(event) {
  Log_Textarea.textContent = Log_Textarea.textContent + "Event = " + event.type + ", Data = " + event.data + "\n";
}

inputElement.addEventListener("compositionstart", handleEvent);
inputElement.addEventListener("compositionupdate", handleEvent);
inputElement.addEventListener("compositionend", handleEvent);

Composition Event 複合事件，是 JavaScript DOM 3 級事件中新添加的 Event 事件類型，用於處理 (IME) Input Method Editor 輸入法編輯器在拼音還沒轉換之前取得觸發的序列。

中文輸入法在網頁開發中常需要處理使用者的鍵盤輸入，因為每個按鍵都對應一個字元可以使用 keydown、keyup 或 input 事件來獲取使用者的輸入內容。對於中文或其他需要輸入法的語言來說，使用者需要先輸入一組拼音或注音符號，然後再從「候選清單」中選擇想要的漢字。這個過程稱為文字複合 Composition 在文字複合期間，使用者的輸入並不會立即反映在網頁上，而是會顯示在一個特殊的輸入框中。當使用者選擇了一個漢字後，文字複合才結束，這時才會觸發 input 事件並將選擇的漢字傳遞給網頁。可以使用 addEventListener 方法來 CompositionEvent 事件的監聽器，並在回呼函數中取得使用者的輸入內容。