From my understanding the difference between the change and input events for input fields is that change only occurs when you lose focus of the field. This seems to only make sense for text fields or maybe a combined date/time input or something similar. Is there any sort of functional difference between the two events for other kinds of inputs in which multiple changes occurring in a single transaction doesn't really make sense? Specifically file inputs?
<input type="file"/> onChange vs onInput?
Viewed 2180
2 Answers
Any form field (except a hidden form field) can gain/lose the focus (select, textarea, button, etc.). The change event is simply used when you want to delay the execution of the callback until any edits have been completed, whereas input is used for "real time" execution of the call back, which is useful for things like evaluating password strength, validity checking, or filtering results for example.
The input event occurs as soon as the value of the element changes. The change event occurs when the new value is committed.
For most elements, these happen at the same time: Checking a checkbox, toggling a radio button, selecting a new option from a menu.
But some elements have intermediate states while the user is modifying them. When updating a text input, the input event occurs immediately, but the change event doesn't occur until you commit the change by lose focus or submit the form. I haven't tested it, but I think a slider would trigger input as you're dragging the thumb, but doesn't trigger change until you release it.
Related