---

代碼

html

<input type="text" />

---

JavaScript

var inp = document.querySelector('input');
let isComposing = false;function search() {if (isComposing) return false;console.log('搜索: ', inp.value);
}inp.addEventListener('input', function () {search();
});inp.addEventListener('compositionstart', function () {isComposing = true;
});inp.addEventListener('compositionend', function () {isComposing = false;search();
});

---

compositionend

MDN

當文本段落的組成完成或取消時，compositionend事件將被觸發(具有特殊字符的觸發，需要一系列鍵和其他輸入，如語音識別或移動中的字詞建議)。

---

compositionstart

MDN

文本合成系統如input method editor(即輸入法編輯器)開始新的輸入合成時會觸發compositionstart事件。

---

addEventListener

w3school
定義

addEventListener()方法將事件處理程序附加到元素。

參數	描述
type	必需。事件的名稱。 請不要使用 "on" 前綴。 請使用 "click" 而不是 "onclick"。 DOM事件的完整列表
function	必需。事件發生時運行的函數。
useCapture	可選（default = false）。 false - 處理程序在冒泡階段執行。 true - 處理程序在捕獲階段執行。

---

技術細節

該方法將把指定的事件監聽器函數添加到當前節點的監聽器集合中，以處理指定類型type的事件。如果useCapture為true，則監聽器被注冊為捕捉事件監聽器。如果useCapture為false，它被注冊為普通事件監聽器。
addEventListener()可能被調用多次，在同一個節點上為同一種類型的事件注冊多個事件句柄。但要注意，DOM不能確定多個事件句柄被調用的順序。
如果一個事件監聽器函數在同一個節點上用相同的type和useCapture參數注冊了兩次，那么第二次注冊將被忽略。如果正在處理一個節點上的事件時，在這個節點上注冊了一個新的事件監聽器，則不會為那個事件調用新的事件監聽器。
當用Node.cloneNode()方法或Document.importNode()方法復制一個Document節點時，不會復制為原始節點注冊的事件監聽器。
這個方法也在Document和Window對象上定義了，而且工作方式類似。