说说 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)
    }

　　执行结果：

　　说说 input 输入框的事件

　　其实这个过程并没有很意外，唯一感觉不太对劲的是 onchange 事件并不是每次输入框值改变的时候触发的，而是在失去焦点时候，并且在 onblur 之前触发；

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；

秒客网

说说 input 输入框的事件

相关文章