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/