测试代码简单到吓人，甚至于事件都可以写在一个字符串里，用空格分开，不过我觉得太长了不好看，测试浏览器为Chrome 80。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input id="input" />
<script>
const input = document.getElementById("input");
input.addEventListener("input", function(e) {
console.log("input", e);
});
input.addEventListener("change", function(e) {
console.log("change", e);
});
input.addEventListener("textInput", function(e) {
console.log("textInput", e);
});
input.addEventListener("keydown", function(e) {
console.log("keydown", e);
});
input.addEventListener("keyup", function(e) {
console.log("keyup", e);
});
input.addEventListener("keypress", function(e) {
console.log("keypress", e);
});
input.addEventListener("compositionend", function(e) {
console.log("compositionend", e);
});
</script>
</body>
</html>针对输入框，我们知道最常见的两个事件是input和change，change是在回车确认或者输入框失去焦点的时候触发，这估计是大多数人所知道的关于输入的事件了。下面我们再深入挖掘一下在DOM里跟输入有关的事件。
事件概览
跟输入有关的事件大致有如下，所有事件都注意大小写，不然准备好怀疑人生
inputchangekeydownkeypresskeyuptextInputcompositionend
输入英文
依次触发如下事件
keydownkeypresstextInputinputkeyupchange（如果失去焦点）
看一下keypress的，选它做代表来代表其他key操作的事件
再看一下textInput
最后看一下input的
change里是不含输入内容的
输入拼音
切换到拼音输入法，假如现在我们想要输入一个“你”字，在输入”N”、”I”后先停下来
- 输入过程中，
keydown和keyup居然没有成对，出现一个很奇怪key("Process")的keyup事件 - 过程中，没有出现
textInput事件 - 出现了
input事件，并且data可能不是单个的字符，比如会是”ni“，并且inputType是叫insertCompositionText
此时如果输入空格完成中文输入
- 输入完成后有
textInput事件，并且data为最终的中文字符 - 输入完成后有
input事件，并且data为最终的中文字符 - 第一次出现了
compositionend事件，它代表了中文的输入完成，data为最终的中文字符，后面还会再见到它 keyup事件最后出现，一如既往的还是有Process这个特殊的keyup
但如果是输入回车，仅输入英文
- 输入完成后有
textInput事件，并且data为最终的英文字符 - 输入完成后有
input事件，并且data为最终的英文字符 - 还是有
compositionend件的，data为最终的英文字符 keyup只出现了一次- 由于按下了回车，最后触发了一下
change事件
如果是鼠标点一下失去焦点，使得输入英文
- 无论如何
compositionend事件都会出来，带的还是最终的英文字符 - 失去焦点也触发了
change事件
以上整个过程都没有触发keypress事件。
最后我们看一个一口气输入”你好”这个中文词语的事件过程
回格删除
点击一下回格删除的按钮，我们可以看到触发的事件顺序如下，注意并没有触发textInput事件
keydowninputkeyup
并不会触发textInput事件，在key相关的事件中，可以看到识别出Backspace键
在input事件中，data属性为null，但是inputType能识别出deleteContentBackward
回车确认
在没有输入任何内容的情况下直接按回车，此时触发的事件顺序是
keydownkeypresskeyup
在输入改变内容后按下回车，此时触发的事件顺序是
keydownkeypresschangekeyup
看一下change事件中回传的event吧
粘贴输入
通过粘贴也能在文本框中输入内容，用快捷键粘贴依次触发的事件是
keydownkeydowntextInputinputkeyupkeyupchange（如果失去焦点）
如果使用鼠标右键粘贴，那么不会触发跟key有关的事件，重点看一下textInput和input里回传了哪些内容
在textInput里，data里是粘贴的内容，type是textInput
在input里，data是null，但有inputType为insertFromPaste
拖动输入
拖动字符串内容也能完成输入，比较有趣，依次触发
textInputinput
看一下textInput，带有内容
再看一下input，能精确识别出是拖动输入的
阻止输入
直接给出结论了，在用addEventListen方法也即是DOM2事件代码的前提下，只有keydown、keypress、textInput三种事件处理里调用event.preventDefault()才会阻止住内容输入到输入框里。
相关文章