7

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?

cebo
  • 688
  • 1
  • 8
  • 26
  • For more specific info MDN is a really good source for these sorts of questions. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event – Deadron Jan 14 '21 at 20:31
  • Yes, but react attaches onChange events to input events, so the distinction can be insignificant and on some codebases indistinguishable. Notably, on change should trigger EVERY change, but it doesn't in react because of how they handle it. If you are using react, that might be a source of confusion. Here is a related post: https://stackoverflow.com/questions/38256332/in-react-whats-the-difference-between-onchange-and-oninput#:~:text=The%20'onChange'%20which%20we%20see,both%20of%20them%20in%20react.&text=In%20retrospect%20it%20might%20have,the%20behavior%20of%20another%20event. – ekrenzin Jan 14 '21 at 20:38

2 Answers2

6

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.

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
4

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.

Barmar
  • 741,623
  • 53
  • 500
  • 612