input框focus,blur,change,input,keyup,keydown发生的顺序

  <div id="app">
    <input type="text" id="txt"/>
    <p id="show"></p>
  </div>
  <script >
    let result = []
    txt.addEventListener('keyup',function (event){
      result.push({
        event:'keyup',
        value:this.value,
        code:event.keyCode,
        eventThis:this
      })
      console.log(result)
    })
    txt.addEventListener('keydown',function (event){
      result.push({
        event:'keydown',
        value:this.value,
        code:event.keyCode,
        eventThis:this
      })
      console.log(result)
    })
    txt.addEventListener('input',function (event){
      result.push({
        event:'input',
        value:this.value,
        code:event.keyCode,
        eventThis:this
      })
      console.log(result)
    })
    txt.addEventListener('change',function (event){
      result.push({
        event:'change',
        value:this.value,
        code:event.keyCode,
        eventThis:this
      })
      console.log(result)
    })
    txt.addEventListener('focus',function (event){
      result.push({
        event:'focus',
        value:this.value,
        code:event.keyCode,
        eventThis:this
      })
      console.log(result)
    })
    txt.addEventListener('blur',function (event){
      result.push({
        event:'blur',
        value:this.value,
        code:event.keyCode,
        eventThis:this
      })
      console.log(result)
    })

输出结果如下:

Screenshot from 2019-02-22 11-14-33.png

从图中可以看出如下结论：

1. keydown事件发生时，输入值并没有发生变化，所以keydown可用于阻止某些输入字符的显示。

2. input事件发生时，无法获取到keyCode值，并且紧随在keydown事件之后。

3. keyup事件最后发生，一次键盘敲入事件彻底完成。

4. change事件只会发生在输入完成后，也就是输入框失去焦点之前。

5. 输入完成后观察
   当用户完成所有的输入时，这时候必定会发生blur事件，只有这时才会触发change，所以可用blur与change监听用户输入是否完成，输入框的验证多半发生在此时。

6. 输入事件流
   输入框发生的事件流程依次为focus、keydown、input、keyup、change与blur，见下图所示。

inputImg.png