HTMLElement: change event - Web APIs | MDN
Skip to main content
Skip to search
MDN
HTML
HTML: Markup language
HTML reference
Elements
Global attributes
Attributes
See all…
HTML guides
Responsive images
HTML cheatsheet
Date & time formats
See all…
Markup languages
SVG
MathML
XML
CSS
CSS: Styling language
CSS reference
Properties
Selectors
At-rules
Values
See all…
CSS guides
Box model
Animations
Flexbox
Colors
See all…
Layout cookbook
Column layouts
Centering an element
Card component
See all…
JavaScriptJS
JavaScript: Scripting language
JS reference
Standard built-in objects
Expressions & operators
Statements & declarations
Functions
See all…
JS guides
Control flow & error handing
Loops and iteration
Working with objects
Using classes
See all…
Web APIs
Web APIs: Programming interfaces
Web API reference
File system API
Fetch API
Geolocation API
HTML DOM API
Push API
Service worker API
See all…
Web API guides
Using the Web animation API
Using the Fetch API
Working with the History API
Using the Web speech API
Using web workers
All
All web technology
Technologies
Accessibility
HTTP
URI
Web extensions
WebAssembly
WebDriver
See all…
Topics
Media
Performance
Privacy
Security
Progressive web apps
Learn
Learn web development
Frontend developer course
Getting started modules
Core modules
MDN Curriculum
Check out the video course from Scrimba, our partner
Learn HTML
Structuring content with HTML module
Learn CSS
CSS styling basics module
CSS layout module
Learn JavaScript
Dynamic scripting with JavaScript module
Tools
Discover our tools
Playground
HTTP Observatory
Border-image generator
Border-radius generator
Box-shadow generator
Color format converter
Color mixer
Shape generator
About
Get to know MDN better
About MDN
Advertise with us
Community
MDN on GitHub
Blog
Toggle sidebar
Web
Web APIs
HTMLElement
change
Theme
OS default
Light
Dark
English (US)
Remember language
Learn more
Deutsch
English (US)
Español
Français
日本語
한국어
Português (do Brasil)
Русский
中文 (简体)
HTMLElement: change event
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Learn more
See full compatibility
The change event is fired for <input>, <select>, and <textarea> elements when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.
Depending on the kind of element being changed and the way the user interacts with the element, the change event fires at a different moment:
When a <input type="checkbox"> element is checked or unchecked (by clicking or using the keyboard);
When a <input type="radio"> element is checked (but not when unchecked);
When the user commits the change explicitly (e.g., by selecting a value from a <select>'s dropdown with a mouse click, by selecting a date from a date picker for <input type="date">, by selecting a file in the file picker for <input type="file">, etc.);
When the element loses focus after its value was changed: for elements where the user's interaction is typing rather than selection, such as a <textarea> or the text, search, url, tel, email, or password types of the <input> element.
The HTML specification lists the <input> types that should fire the change event.
In this article
Syntax
Event type
Examples
Specifications
Browser compatibility
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
js
addEventListener("change", (event) => { })
onchange = (event) => { }
Event type
A generic Event.
Examples
<select> element
HTML
html
<label>
Choose an ice cream flavor:
<select class="ice-cream" name="ice-cream">
<option value="">Select One …</option>
<option value="chocolate">Chocolate</option>
<option value="sardine">Sardine</option>
<option value="vanilla">Vanilla</option>
</select>
</label>
<div class="result"></div>
body {
display: grid;
grid-template-areas: "select result";
}
select {
grid-area: select;
}
.result {
grid-area: result;
}
JavaScript
js
const selectElement = document.querySelector(".ice-cream");
const result = document.querySelector(".result");
selectElement.addEventListener("change", (event) => {
result.textContent = `You like ${event.target.value}`;
});
Result
Text input element
For some elements, including <input type="text">, the change event doesn't fire until the control loses focus. Try entering something into the field below, and then click somewhere else to trigger the event.
HTML
html
<input placeholder="Enter some text" name="name" />
<p id="log"></p>
JavaScript
js
const input = document.querySelector("input");
const log = document.getElementById("log");
input.addEventListener("change", updateValue);
function updateValue(e) {
log.textContent = e.target.value;
}
Result
Specifications
Specification
HTML
# event-change
HTML
# handler-onchange
Browser compatibility
Enable JavaScript to view this browser compatibility table.
Different browsers do not always agree whether a change event should be fired for certain types of interaction. For example, keyboard navigation in <select> elements used to never fire a change event in Gecko until the user hit Enter or switched the focus away from the <select> (see Firefox bug 126379). Since Firefox 63 (Quantum), this behavior is consistent between all major browsers, however.
Help improve MDN
Was this page helpful to you?
Yes
No
Learn how to contribute
This page was last modified on Sep 25, 2025 by MDN contributors.
View this page on GitHub • Report a problem with this content
Filter sidebar
Clear filter input
HTML DOM API
HTMLElement
Instance properties
accessKey
accessKeyLabel
anchorElement
attributeStyleMap
autocapitalize
autocorrect
autofocus
contentEditable
dataset
dir
draggable
editContext
enterKeyHint
hidden
inert
innerText
inputMode
isContentEditable
lang
nonce
offsetHeight
offsetLeft
offsetParent
offsetTop
offsetWidth
outerText
popover
spellcheck
style
tabIndex
title
translate
virtualKeyboardPolicy
writingSuggestions
Instance methods
attachInternals()
blur()
click()
focus()
hidePopover()
showPopover()
togglePopover()
Events
beforetoggle
change
command
drag
dragend
dragenter
dragleave
dragover
dragstart
drop
error
interest
load
loseinterest
toggle
Inheritance
Element
Node
EventTarget
Related pages for HTML DOM
BeforeUnloadEvent
DOMStringMap
ErrorEvent
HTMLAnchorElement
HTMLAreaElement
HTMLAudioElement
HTMLBRElement
HTMLBaseElement
HTMLBodyElement
HTMLButtonElement
HTMLCanvasElement
HTMLDListElement
HTMLDataElement
HTMLDataListElement
HTMLDialogElement
HTMLDivElement
HTMLDocument
HTMLEmbedElement
HTMLFieldSetElement
HTMLFormControlsCollection
HTMLFormElement
HTMLFrameSetElement
HTMLGeolocationElement
HTMLHRElement
HTMLHeadElement
HTMLHeadingElement
HTMLHtmlElement
HTMLIFrameElement
HTMLImageElement
HTMLInputElement
HTMLLIElement
HTMLLabelElement
HTMLLegendElement
HTMLLinkElement
HTMLMapElement
HTMLMediaElement
HTMLMenuElement
HTMLMetaElement
HTMLMeterElement
HTMLModElement
HTMLOListElement
HTMLObjectElement
HTMLOptGroupElement
HTMLOptionElement
HTMLOptionsCollection
HTMLOutputElement
HTMLParagraphElement
HTMLPictureElement
HTMLPreElement
HTMLProgressElement
HTMLQuoteElement
HTMLScriptElement
HTMLSelectElement
HTMLSourceElement
HTMLSpanElement
HTMLStyleElement
HTMLTableCaptionElement
HTMLTableCellElement
HTMLTableColElement
HTMLTableElement
HTMLTableRowElement
HTMLTableSectionElement
HTMLTemplateElement
HTMLTextAreaElement
HTMLTimeElement
HTMLTitleElement
HTMLTrackElement
HTMLUListElement
HTMLUnknownElement
HTMLVideoElement
HashChangeEvent
History
ImageData
Location
MessageChannel
MessageEvent
MessagePort
Navigator
PageRevealEvent
PageSwapEvent
PageTransitionEvent
Plugin
PluginArray
PromiseRejectionEvent
RadioNodeList
TimeRanges
UserActivation
ValidityState
Window
WorkletGlobalScope
Guides
Using microtasks in JavaScript with queueMicrotask()
In depth: Microtasks and the JavaScript runtime environment
MDN
Your blueprint for a better internet.
MDN
About
Blog
Mozilla careers
Advertise with us
MDN Plus
Product help
Contribute
MDN Community
Community resources
Writing guidelines
MDN Discord
MDN on GitHub
Developers
Web technologies
Learn web development
Guides
Tutorials
Glossary
Hacks blog
Mozilla
Website Privacy Notice
Telemetry Settings
Legal
Community Participation Guidelines
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.