说说input输⼊框的事件
从input框获取焦点到，输⼊值，失去焦点这个过程所有事件，以及⼀些特点；
1、过程
  onfocus -> 键盘输⼊ -> onkeydown -> onkeypress -> onkeyup -> oninput -> 失去焦点 ->  onchange -> onblur
  如下，奉上代码；
function handleFocus (event) {
console.log('onfocus事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
};
function handleKeyDown (event) {
console.log('onkeydown事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
}
function handleKeyPress (event) {
console.log('onkeypree事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
}
function handleKeyUp (event) {
console.log('onkeyup事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
}
function handleInput (event) {
console.log('oninput事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
}
function handleChange (event) {
console.log('onchange事件...', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
};
function handleBlur (event) {
console.log('onblue事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode)
}
  执⾏结果：
  其实这个过程并没有很意外，唯⼀感觉不太对劲的是 onchange 事件并不是每次输⼊框值改变的时候触发的，⽽是在失去焦点时候，并且在 onblur 之前触发；
2、说说这些事件
  onfocus
    并没有什么特别的，就是当焦点转移到（点击，tab切换） input 框上边的时候触发；
  onkeydown
    键盘按下的时候触发，但是此时按下的值并没有被输⼊到 input ，所以，此时的 value 没有值，或者说它的值只能是之前的旧值
    另外，此时可以阻⽌按键的默认事件；
  onkeypress
    按键在按下之后，并且是按键松开之前触发的；
input绑定onblur事件    和 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；

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。