React-输入事件

onChange和onInput事件区别

image.png

1 .输入一个字,触发两次onInput,一个onChange,删除的时候,一次.onInput,onChange事件.尼玛好像是上一次有缓存,重新刷新界面发现都是触发一次.如果还有这种问题就炸了

input

1 .input是理想的文本内容变化监听事件.
2 .IE9以下浏览器不支持input事件,可以使用ie的propertychange事件提代
3 .input仅仅在用户输入导致value属性值变化时触发,通过js改变属性无法触发这个
4 .propertychange事件任何属性改变都会触发
5 .好像大部分所有都是可以用input事件实现的.都能触发到,input,type=file都能触发
6 .不失去焦点也会触发

change

1 .必须失去焦点才会触发,或者回车
2 .oninput 事件在元素的值发生更改后立即发生，而 onchange 事件发生在元素失去焦点时，在内容发生更改后。
3 .为啥input里面,输入文字,根本没有失去焦点,也会触发change事件.
4 .好像是react里面onChange和onInput是一个事件,同样的表现
5 .type=radio|checkbox的input,单元素:checked时触发,
6 .select元素,选择完成时触发
7 .React中的onChange事件行为同原生的input事件相同

keyDown

1 .按下任何字符都会触发,

keyUp

1 .按键弹起后触发,chrome中切换中英文按钮不会触发keyup.中英文按钮是啥没找到,不过fn键倒是不会触发

keypress事件

1 .keypress会在按下可显示内容在keydown之后触发,shfit/meta等不会产生实际内容的按钮不会触发keypress