keydown、input、keyup
我们常常需要通过监听输入框的keydown、input、keyup、change、blur事件来操作输入内容，所以他们的差异就不得不了解。先来看一个实验案例：
<body><input id='user' type="text" />
</body>
<script>var user = document.getElementById('user');var res = [];user.onkeyup = function(event){res.push({event: 'keyup',value: this.value,keyCode: event.keyCode})}user.onkeydown = function(event){res.push({event: 'keydown',value: this.value,keyCode: event.keyCode})}user.oninput = function(event){res.push({event: 'input',value: this.value,keyCode: event.keyCode})}user.onchange = function(event){res.push({event: 'change',value: this.value,keyCode: event.keyCode})console.log('change-------------');console.table(res)}user.onblur = function(event){res.push({event: 'blur',value: this.value,keyCode: event.keyCode})console.log('blur-------------');console.table(res)}
输入英文 ‘ab’ 结果如下图：
可以看出触发事件的顺序依次为 keydown -> input -> keyup -> change -> blur
- keydown总是不能准确的拿到输入框的value
- input总是能准确的拿到输入框的value，但是不能拿到keyCode
- keyup总是能准确的拿到输入框的value，也能拿到当前输入的keyCode
注意：当输入完毕敲回车键后能触发change事件但不能触发blur事件，只有把光标从输入框移除后才能触发blur事件
输入汉字 ‘啊’ 结果如下图：
可以看出触发事件的顺序大致和输入英文保持一致，但也不完全相同。
- keydown仍然总是不能准确的拿到输入框的value
- input仍然总是能准确的拿到输入框的value，但是不能拿到keyCode
- keyup变得不总是能准确的拿到输入框的value
注意：输入汉字的时候我们没有谈论keyCode，因为它变得有些诡异，甚至会因此导致一些处理不慎的错误。
keydown、input、keyup
我们常常需要通过监听输入框的keydown、input、keyup、change、blur事件来操作输入内容，所以他们的差异就不得不了解。先来看一个实验案例：
<body><input id='user' type="text" />
</body>
<script>var user = document.getElementById('user');var res = [];user.onkeyup = function(event){res.push({event: 'keyup',value: this.value,keyCode: event.keyCode})}user.onkeydown = function(event){res.push({event: 'keydown',value: this.value,keyCode: event.keyCode})}user.oninput = function(event){res.push({event: 'input',value: this.value,keyCode: event.keyCode})}user.onchange = function(event){res.push({event: 'change',value: this.value,keyCode: event.keyCode})console.log('change-------------');console.table(res)}user.onblur = function(event){res.push({event: 'blur',value: this.value,keyCode: event.keyCode})console.log('blur-------------');console.table(res)}
输入英文 ‘ab’ 结果如下图：
可以看出触发事件的顺序依次为 keydown -> input -> keyup -> change -> blur
- keydown总是不能准确的拿到输入框的value
- input总是能准确的拿到输入框的value，但是不能拿到keyCode
- keyup总是能准确的拿到输入框的value，也能拿到当前输入的keyCode
注意：当输入完毕敲回车键后能触发change事件但不能触发blur事件，只有把光标从输入框移除后才能触发blur事件
输入汉字 ‘啊’ 结果如下图：
可以看出触发事件的顺序大致和输入英文保持一致，但也不完全相同。
- keydown仍然总是不能准确的拿到输入框的value
- input仍然总是能准确的拿到输入框的value，但是不能拿到keyCode
- keyup变得不总是能准确的拿到输入框的value
注意：输入汉字的时候我们没有谈论keyCode，因为它变得有些诡异，甚至会因此导致一些处理不慎的错误。