The "onchange" event in JavaScript allows you to execute a function when the value of an HTML element changes. This comprehensive guide will provide an expert-level overview of how to fully leverage onchange in your code.
What is the onchange Event?
The onchange event fires when the value of an HTML element changes and loses focus. For example, with an input element:
User types -> clicks away -> onchange event triggers onchange only runs after the value finishes changing and the element (input, select, etc.) loses focus. Some key features:
- Executes JavaScript code in response to user updates to form fields, dropdowns, and other inputs
- Main use case is form validation, dynamic UI updates, and related tasks
- Changes fire after new values are committed, allowing you to access the final value state
According to Mozilla Developer Network, the onchange event is supported across all major modern browsers. Older browsers like IE9 and below lack support for the addEventListener() API, requiring fallback to the onchange HTML attribute.
Industry Usage Rates
The onchange event sees relatively high adoption compared to related form events:
| Event | Usage Rate |
|---|---|
| onchange | ~62% |
| oninput | ~52% |
| oninvalid | ~28% |
Source: caniuse.com
This data confirms that onchange remains one of the most relevant mechanisms for responding to user updates.
Key Benefits of onchange
Before diving into examples, understanding the motivation for using onchange will help guide appropriate usage. Key benefits include:
Simple Validation – Easy way to check input after changes occur. For example, ensuring proper email formats.
Dynamic Updates – Refresh or alter UI elements based on user changes. For example, showing/hiding DOM elements.
Data Filtering – Connect filters and datastores to UI inputs.onchange can re-query and display filtered data sets easily.
Form Interactivity – Create multi-step conditional forms that respond to user changes.
Asynchronous Actions – Trigger backend calls like API requests based on input changes.
Data Binding – Integrates well with frameworks for data binding and model updates.
Better UX – Many creative uses possible to tighten UI feedback loops.
The onchange event creates opportunities for form validation, dynamic views, and richer interactivity.
How onchange Works
Before using the event, it helps to understand the internals. Here is the generic onchange event flow:
- User interacts with HTML element, changing value
- Element loses focus (blur event fires)
- Browser queues onchange event
- onchange event handler runs user JavaScript code
- Code execution finishes, page resumes normal activity
A key detail is that onchange waits for the element to lose focus before queueing code execution. Compare this to the oninput event which fires for every value modification rather than waiting for changes to finish.
There are slight differences in how browsers implement the queueing process:
- Firefox, Safari, Chrome – enqueue onchange at microtask timing
- Edge, IE11 – enqueue at task timing instead
In most cases this nuance doesn‘t matter, but could impact very intricate event sequencing involving promises and other async logic.
Now that you understand the internals, let‘s explore practical examples.
Using onchange in JavaScript
There are two main methods for assigning onchange event handlers:
1. HTML Attribute
The simplest approach is using the onchange attribute on HTML elements:
<input type="text" onchange="validateInput()">Whenever the input changes, this calls the validateInput() JavaScript function.
Pros
- Very easy to setup
- Keeps logic alongside element
Cons
- Only supports simple logic
- Mixes behavior and presentation
- Not scalable
- Lacks browser support (no IE9-)
Due to the limitations, most experts recommend avoiding this old HTML-based approach.
2. addEventListener()
The modern approach is imperatively adding listeners with JavaScript:
// Select input element
const input = document.querySelector(‘input‘);
// Add event listener
input.addEventListener(‘change‘, () => {
// Runs onchange
});Pros
- Separates JS behavior from content
- Supports complex logic
- More dynamic and flexible
- Better browser support
Cons
- More verbose setup
- Logic no longer colocated
addEventListener() unlocks more scalable onchange handling at the cost of slightly more code.
Practical Examples
Let‘s explore some practical examples of using onchange event handlers.
Form Validation
A common use case is validating values after changes occur:
function validateEmail(email) {
// return true if valid
}
const emailInput = document.querySelector(‘#email‘);
emailInput.addEventListener(‘change‘, () => {
if(!validateEmail(emailInput.value)) {
// Show error
} else {
// Clear error
}
});This validates the email after changes, showing any errors.
Other examples:
// Validate password complexity
passwdInput.addEventListener(‘change‘, checkPassword);
// Ensure username availability
usernameInput.addEventListener(‘change‘, isUsernameFree);
// Validate US zip code
zipInput.addEventListener(‘change‘, isValidZip); onchange works great for validation since it waits for user input to completely finish before running.
Dynamic UI Updates
You can also use onchange to dynamically update UI elements:
// Select element for dynamic content
const content = document.querySelector(‘#content‘);
// Dropdown menu for section
const menu = document.querySelector(‘#menu‘);
menu.addEventListener(‘change‘, () => {
// Update content based on menu value
content.innerHTML = loadSection(menu.value);
})Other examples:
// Show error labels if validation fails
form.addEventListener(‘change‘, toggleErrors);
// Change button text based on input state
pwdInput.addEventListener(‘change‘, updateSubmitButton);
// Lazy load images when dropdown value changes
select.addEventListener(‘change‘, lazyLoadImages);Intelligently updating your UI in response to changes helps create a tight feedback loop.
Dynamic Data Filtering
If you have dynamic datasets and want to connect filters to populate tables or charts, onchange can help by reducing boilerplate.
For example:
let data = []; // Populated elsewhere
// Filter key UI
const filterKeyInput = document.querySelector(‘#filter‘);
// Table to display data
const dataTable = document.querySelector(‘#table‘);
function renderTable(filteredData) {
// Map data into table
}
filterKeyInput.addEventListener(‘change‘, () => {
// Fetch new filtered data
const filtered = filterDataByKey(data, filterKey.value);
renderTable(filterData);
});Now your users can filter data in real-time via UI controls.
Creative Examples
onchange also unlocks creative interactivity opportunities:
Animations
// Animate height based on slider value
slider.addEventListener(‘change‘, () => {
box.animate(height: slider.value);
});Asynchronous Data Loading
// Fetch external API data when value changes
input.addEventListener(‘change‘, async () => {
const data = await fetchData(input.value);
// Update UI
});Your imagination is the limit!
Frameworks
onchange integrates well with popular frameworks:
React
function Input() {
function handleChange(e) {
// Runs on change
}
return (
<input onChange={handleChange}>
)
}Vue
const Input = {
// v-on captures events
template: ‘<input v-on:change="onChange">‘,
methods: {
onChange() {
// Handle change
}
}
}Most frameworks convert onchange and other events to specialized props.
Performance Considerations
As with most JavaScript events, take care not to overuse onchange handlers, as many active listeners can slow down page interactions. Some tips:
- Avoid complex visual updates – use lightweight manipulation if possible
- Debounce rapid changes to limit function calls
- Disconnect unneeded listeners when done
- Streamline data flows that cascade across multiple onchange handlers
With large, intricate DOM structures and UIs, throttle usage accordingly. Simple dashboards or forms generally won‘t notice performance issues.
Comparison With Other Events
There are a few other events that capture similar behaviors to onchange:
oninput – Low level event that fires for every modification while typing. Better for rapid updates like character counters.
onblur – Triggers when element loses focus but doesn‘t carry new value.
onpaste – Specific to detecting value changes from clipboard pastes.
onreset – Form reset behavior.
onchange represents the best of both worlds – waiting until changes stabilize while still responding dynamically like oninput. Think of it as the "commit event" for end-user changes.
Cross-Browser Support
The onchange event has excellent support across modern browsers with full functionality in Chrome, Firefox, Safari, Edge, and more.
Most inconsistencies come from old IE versions:
| Browser | Notes |
|---|---|
| IE 9 and below | No support for addEventListener |
| IE 9 and below | Limited onchange attribute support |
For full legacy support, utilize the onchange HTML attribute to handle older IE browser traffic. Modern browsers will fall back to standards-based event handling.
You can also feature detect support:
function supportsOnchange() {
return ‘onchange‘ in document.createElement(‘input‘);
}Then provide alternative fallback logic.
Beyond these cases, virtually all modern browsers fully support the onchange event.
Conclusion
The onchange event remains a versatile tool for responding to user updates, unlocking validation, dynamic UIs, rich interactivity, and more.
Key takeaways:
- onchange fires when an element‘s value finishes changing and it loses focus
- Primarily used for form validation, UI updates, filters, and data interactivity
- Attach handlers with the onchange attribute or addEventListener()
- Careful not to overuse, as many active listeners can impact performance
- Exhibits excellent browser support, with caveats in older IE versions
With those fundamentals understood, you‘re ready to build more adaptive UIs!
For more guidance, refer to examples above or check MDN Web Docs. onchange opens up whole new categories of creative interactions – integrate it into your next web project!