中文输入法、文字复合 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 事件的监听器，并在回唿函数中取得使用者的输入内容。