监听input变化的事件
Posted slongs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了监听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元素属性发生改变即可立即捕获到.可以参考这篇文档点击进入。
以上是关于监听input变化的事件的主要内容，如果未能解决你的问题，请参考以下文章
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法