web前端之中文输入法导致的高频事件、addEventListener、compositionstart、compositionend

---

代码

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)。1.处理程序在冒泡阶段执行。2.处理程序在捕获阶段执行。

---

技术细节

该方法将把指定的事件监听器函数添加到当前节点的监听器集合中，以处理指定类型type的事件。如果useCapture为true，则监听器被注册为捕捉事件监听器。如果useCapture为false，它被注册为普通事件监听器。
addEventListener()可能被调用多次，在同一个节点上为同一种类型的事件注册多个事件句柄。但要注意，DOM不能确定多个事件句柄被调用的顺序。
如果一个事件监听器函数在同一个节点上用相同的type和useCapture参数注册了两次，那么第二次注册将被忽略。如果正在处理一个节点上的事件时，在这个节点上注册了一个新的事件监听器，则不会为那个事件调用新的事件监听器。
当用Node.cloneNode()方法或Document.importNode()方法复制一个Document节点时，不会复制为原始节点注册的事件监听器。
这个方法也在Document和Window对象上定义了，而且工作方式类似。