input 的 oninput onkeypress onkeydown onchange 事件的区别

事件执行顺序:

<input type="text" id="foo" 
onkeydown="console.log('down')" 
onkeypress="console.log('press')" 
oninput="console.log('input')" 
onkeyup="console.log('up')" >

以上打印顺序为 ' down press input up', 故对应的事件触发顺序为 onkeydown > onkeypress > oninput > onkeyup

oninput vs onchange:
oninput 是input内内容改变时触发, onchange则在内容改变并且input失焦后触发
https://www.w3schools.com/jsref/event_oninput.asp

onkeypress vs onkeydown:
onkeypress 事件触发不包括ctrl, backspace等功能键, 即 ctrl+c等按键不触发 onkeypress 但会触发 onkeydown, 因为onkeydown事件触发包括所有按键

oninput vs onkeypress/onkeydown:
oninput 是input内内容更新变化时触发, onkeypress则在按下按键后触发(此时 input 内文本还没更新):

<!-- 以字母大写效果触发为例可看出两者区别 -->
INPUT <input id="testInput" oninput="this.value=this.value.toUpperCase()" /> <br/>
KEYPRESS <input id="testKeyPress" onkeypress="this.value=this.value.toUpperCase()" />

 

以上测试代码线上地址: https://jsfiddle.net/skura23/atn1uepm/