web前端之中文输入法导致的高频事件、addEventListener、compositionstart、compositionend
MENU
- 代码
- compositionend
- compositionstart
- addEventListener
代码
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对象上定义了，而且工作方式类似。