OnChange

onChange is a widely used event handling concept in user interface programming, referring to a handler that responds when the value or state of a control changes. It is not a single standardized method but a convention adopted across HTML, the DOM, and multiple JavaScript frameworks. It commonly applies to input controls such as text fields, checkboxes, radio buttons, selects, and textareas, as well as custom components that expose a value.

In the web browser DOM, the change event has specific semantics. For input, select, and textarea elements, change typically fires when a value is committed: text inputs usually emit onchange when the element loses focus after its value has changed, while a new option is selected in a select element. The input event, by contrast, fires on every modification to the element’s value. Because of this distinction, developers may choose onChange for committed changes or onInput for live updates.

In framework contexts, the onChange name often maps to different behaviors. In React, onChange is a synthetic event handler that fires on every value change for form controls, making it suitable for live, controlled components. In Angular, the equivalent is (change) in templates, while Vue typically uses v-model with input events to synchronize data. The precise timing and event object can vary by framework, but the idea remains: to react to user-driven changes in a control’s value.

Best practices include debouncing or throttling expensive updates, ensuring accessibility for keyboard and assistive technologies, and choosing between onChange, onInput, or framework-specific variants to match the desired user experience.