你不知道的DOM输入事件

时间  2020-03-08 标签 不知道 dom 输入 事件

测试代码简单到吓人，甚至于事件均可以写在一个字符串里，用空格分开，不过我以为太长了很差看，测试浏览器为Chrome 80。javascript

<!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里跟输入有关的事件。
html

事件概览

若是你还不知道DOM了事件的基础知识，那么是时候先补一下了。java

跟输入有关的事件大体有以下，全部事件都注意大小写，否则准备好怀疑人生浏览器

  • input测试

  • changeui

  • keydownspa

  • keypress3d

  • keyupcode

  • textInputcdn

  • compositionend

输入英文

依次触发以下事件

  1. keydown

  2. keypress

  3. textInput

  4. input

  5. keyup

  6. change（若是失去焦点）

看一下keypress的，选它作表明来表明其余key操做的事件


再看一下textInput


最后看一下input的

change里是不含输入内容的


输入拼音

切换到拼音输入法，假如如今咱们想要输入一个“你”字，在输入"N"、"I"后先停下来


  1. 输入过程当中，keydown和keyup竟然没有成对，出现一个很奇怪key("Process")的keyup事件

  2. 过程当中，没有出现textInput事件

  3. 出现了input事件，而且data可能不是单个的字符，好比会是"ni"，而且inputType是叫insertCompositionText

此时若是输入空格完成中文输入


  1. 输入完成后有textInput事件，而且data为最终的中文字符

  2. 输入完成后有input事件，而且data为最终的中文字符

  3. 第一次出现了compositionend事件，它表明了中文的输入完成，data为最终的中文字符，后面还会再见到它

  4. keyup事件最后出现，一如既往的仍是有Process这个特殊的keyup

但若是是输入回车，仅输入英文


  1. 输入完成后有textInput事件，而且data为最终的英文字符

  2. 输入完成后有input事件，而且data为最终的英文字符

  3. 仍是有compositionend件的，data为最终的英文字符

  4. keyup只出现了一次

  5. 因为按下了回车，最后触发了一下change事件

若是是鼠标点一下失去焦点，使得输入英文


  1. 不管如何compositionend事件都会出来，带的仍是最终的英文字符

  2. 失去焦点也触发了change事件

以上整个过程都没有触发keypress事件。

最后咱们看一个一口气输入"你好"这个中文词语的事件过程


回格删除

点击一下回格删除的按钮，咱们能够看到触发的事件顺序以下，注意并无触发textInput事件

  1. keydown

  2. input

  3. keyup

并不会触发textInput事件，在key相关的事件中，能够看到识别出Backspace键


在input事件中，data属性为null，可是inputType能识别出deleteContentBackward


回车确认

在没有输入任何内容的状况下直接按回车，此时触发的事件顺序是

  1. keydown

  2. keypress

  3. keyup

在输入改变内容后按下回车，此时触发的事件顺序是

  1. keydown

  2. keypress

  3. change

  4. keyup

看一下change事件中回传的event吧


粘贴输入

经过粘贴也能在文本框中输入内容，用快捷键粘贴依次触发的事件是

  1. keydown

  2. keydown

  3. textInput

  4. input

  5. keyup

  6. keyup

  7. change（若是失去焦点）

若是使用鼠标右键粘贴，那么不会触发跟key有关的事件，重点看一下textInput和input里回传了哪些内容

在textInput里，data里是粘贴的内容，type是textInput


在input里，data是null，但有inputType为insertFromPaste


拖动输入

拖动字符串内容也能完成输入，比较有趣，依次触发

  1. textInput

  2. input

看一下textInput，带有内容


再看一下input，能精确识别出是拖动输入的


阻止输入

直接给出结论了，在用addEventListen方法也便是DOM2事件代码的前提下，只有keydown、keypress、textInput三种事件处理里调用event.preventDefault()才会阻止住内容输入到输入框里。

联系我们 沪ICP备13005482号-10