说说 input 输入框的事件

1、从input框获取焦点到，输入值，失去焦点这个过程所有事件，以及一些特点；

过程：onfocus -> 键盘输入 -> onkeydown -> onkeypress -> onkeyup -> oninput -> 失去焦点 ->  onchange -> onblur

 注意： onchange 事件并不是每次输入框值改变的时候触发的，而是在失去焦点时候，并且在 onblur 之前触发；oninput则是改变时时触发

<label for="testInput">用户名：</label>
<input type="text" name="username" id="testInput" value="张三" onfocus="handleFocus(event)" />

<script>
  //这种方式必须传参数event
  function handleFocus (event) {
    //onfocus事件 value=张三 keyCode=undefined
    console.log('onfocus事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
  };

  var input = document.getElementById("testInput");

  //这种方式可以不写event
  input.onkeydown = function () {
    console.log('onkeydown事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
  }

  input.onkeypress = function () {
    console.log('onkeypress事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
  }

  //这里获取到value要加上摁下之后的了
  input.onkeyup = function (event) {
    console.log('onkeyup事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
  }

  /*
  * 当用户向 <input> 中尝试输入时触发
  * 该事件在 <input> 或 <textarea> 元素的值发生改变时触发。
  * 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。
  * 另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。
  * oninput 事件是 IE 之外的大多数浏览器支持的事件，在 value 改变时触发，实时的，即每增加或删除一个字符就会触发，然而通
    过 js 改变 value 时，却不会触发。
  * oninput 事件失效情况：a). 当脚本中改变 value 时，不会触发；b).从浏览器的自动下拉提示中选取时，不会触发。
  * */
  input.oninput = function (event) {
    console.log('oninput事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
  }

  //onchange 事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发。
  input.onchange = function (event) {
    console.log('onchange事件...', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
  };

  input.onblur = function (event) {
    console.log('onblur事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode)
  }

</script>

oninput事件在处理type='file'上传图片时，获取到的event.value = 'C:\fakepath\pictureoriginname.jpg' 这样的格式

2、说说这些事件

　　onfocus

　　　　并没有什么特别的，就是当焦点转移到（点击，tab切换） input 框上边的时候触发；

　　onkeydown

　　　　键盘按下的时候触发，但是此时按下的值并没有被输入到 input ，所以，此时的 value 没有值，或者说它的值 只能是之前的旧值

　　　　  另外，此时可以阻止按键的默认事件；

　　 onkeypress

　　　　按键在按下之后，并且是按键松开之前触发的；

　　　　  和 keydown 一样不能获取新的到 value；此时，也可以阻止按键的默认事件；

　　　　  但是这个事件对一下按键的支持不好，一些非输入性质的按键（如；delete, backspare）不支持；（除enter）；

　　oninput

　　　　这个事件很贼，它的触发时机，从上面就可以看到，onpress 之后 onkeyup 之前；

　　　　  此时，已经可以拿到 value，不能拿到keycode，不可以阻止默认事件了 ；

　　　　  关键是这货明明是每次输入框的值变化时候出发的，抢了onchange 的饭碗；

　　　　  另外，这东西是新的，IE9以下不支持，需要使用 onpropertychange；

　　　　  还有这货，仅仅在input， textarea 支持；

　　onkeyup

　　　　  按键在松开之后触发的；

　　　　 能获取新的到 value，keycode；此时，不可以阻止按键的默认事件；

　　onchange

　　　　  你敢说这是你认识的onchange吗？反正我是不敢；在失去焦点之后触发的，明明是 onchange 为什么是在失去焦点后触发的，还偏偏比 onblur 快；

　　　　 能获取新的到 value，不能拿到 keycode；此时，不可以阻止按键的默认事件；

　　onblur

　　　　  失去焦点时候触发，但是还是比 onchange 慢了；

　　　　 能获取新的到 value，不能拿到 keycode；

参考：https://www.cnblogs.com/this-day/p/9087419.html