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

本文主要是介绍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）。

false - 处理程序在冒泡阶段执行。
true - 处理程序在捕获阶段执行。

参数	描述
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对象上定义了，而且工作方式类似。