js 实时监听input输入内容的N种方法

现在有一个需求，需要我们实时监听input输入框中的内容，从而带来更好的用户体验，而不是等我们全部输入完毕才告诉我们格式不对

首先我们创建一个input输入框

    <form name='loginForm'>
        <input type='text' name='user'/>
    </form>

接着获取这个文本框

var loginForm=document.forms['loginForm'],
    user=loginForm.elements['user'];
    //无需设置input的id属性，只设置name即可

方法一

change事件

user.onchange=function(){
    consolo.log(user.value);
}

没错，这个方法的确可以帮助我们解决监听input输入内容的需求，不过这个方法有一个致命的缺点，他不是实时监听，只有input失去焦点且文本框内容发生改变才会触发。
方法二

keydown事件

keypress事件

keyup事件

这是三个键盘事件，不过这三个事件还是有一些不同

1.当按一下任意键，会触发onkeydown事件，如果不松开，将一直触发。

2.当按一下字符键（比如abcd1234这些）会触发onkeypress事件，如果不松开，将一直触发这个事件。

3.当释放键盘上的键，才触发onkeyup事件。

4.按下一个键盘上的字符键，三种事件的触发顺序keydown -> keypress -> keyup

5.按下esc键，在firefox浏览器以及ie浏览器会触发keypress事件，在chrome浏览器和Opera浏览器不会触发keypress（js高级程序设计第三版P379页的说法并不精确）

        user.onkeypress=function(){
            console.log(user.value);
        };
        user.onkeydown=function(){
            console.log(user.value);
        };
        user.onkeyup=function(){
            console.log(user.value);
        }

实际检测时会发现，keydown事件以及keypress事件会存在延迟，每次获取的输入值，都是之前的，总是慢半拍，原因是keydown与keypress总是在新值发生改变之前触发。

最后发现只有keyup符合要求，不过keyup也不是完美的，缺点就是当你复制粘贴值进去的时候，或者浏览器自动记住的值输入进去的时候，keyup事件不会触发

方法三

input事件

        user.oninput=function(){
            console.log(user.value);
        }

input事件就可以完美解决这个问题，不过他也有小缺点，那就是兼容性问题，它不支持ie9以下的浏览器，不过还好，我们有一个ie专属的事件propertychange()

总结：在解决需求的时候，一定要记得验证兼容性，不然又被测试小姐姐要求修改bug