監聽input變化的事件

能夠監聽input變化的事件

在須要監聽input輸入值改變的時候，能夠經過原聲DOM對象的事件oninput/onchange/onkeyup/onkeypress/onkeydown 事件來監聽。

這幾種事件的觸發條件

事件名稱	觸發條件
onchange	事件會在域的內容改變時發生
oninput	事件在用戶輸入時觸發
onkeyup	事件會在鍵盤按鍵被鬆開時發生
onkeypress	在按下按鍵時觸發, 不能觸發全部按鍵(例如：ALT, CTRL, SHIFT, ESC)
onkeydown	會在用戶按下一個鍵盤按鍵時發生

這幾種事件的區別

onchange事件只在鍵盤或者鼠標操做改變對象屬性，且失去焦點時觸發，腳本觸發無效，而onkeydown/onkeypress/onkeyup在處理複製、粘貼、長按鍵 處理上會有問題。
onkeydown、onkeypress、onkeyup在複製文本的時候均沒法感知。

oninput不用考慮是否失去焦點，無論js操做仍是鍵盤鼠標手動操做，只要HTML元素屬性發生改變便可當即捕獲到。

結論

若是要時時的監聽input中值的變化，用oninput最合適

在react中，對input onChange跟原生DOM的oninput機制基本同樣，只要HTML元素屬性發生改變便可當即捕獲到.能夠參考這篇文檔點擊進入。