js onchange event. Change event handler or source
The OnChange handler is called when any input field changes or any button is clicked.
The Name argument contains the name of the input field or button in lower case.
Example: Procedure OnChange(Name: String); Begin // If the price or quantity fields are changed, then calculate the amount If Name="price" Or Name="cnt" Then Summa:= RoundMul(Price, Cnt, 2); // If the amount field is changed, then we calculate the price. If Name="summa" Then Price:= If(Cnt=0, 0, RoundDiv(Summa, Cnt, 2)); end;
A similar effect can be obtained when using the OnPriceChange, OnCntChange, OnSummaChange handlers.
Example: Procedure OnPriceChange; Begin Summa:= RoundMul(Price, Cnt, 2); end; On ProcedureCntChange; Begin Summa:= RoundMul(Price, Cnt, 2); end; On ProcedureSummaChange; Begin Price:= If(Cnt=0, 0, RoundDiv(Summa, Cnt, 2)); end;
This handler is convenient to use when organizing modularity, since it collects information about almost all events. For example:
BaseClass: Variant; On ProcedureCreate; Begin BaseDocument.Init(Self); // Create a base class and exchange links with it. Document initialization. end; On ProcedureChange(Name: String); Begin BaseClass.OnChange(Name); // Passing events to the base class end;
Or an example of modularity using a singleton (module property on the editor's Description tab):
On ProcedureCreate; Begin BaseClass.OnCreate(Self); // Document initialization. end; On ProcedureChange(Name: String); Begin BaseClass.OnChange(Self, Name); // Passing events to the base class. end;
jQuery method .change() binds JavaScript event handler "change"(element change), or fires this event on the selected element. The method is used with HTML elements forms.
Event select fires when the value of a form element changes (elements ,
If the element's value is changed using JavaScript, for example using the jQuery .val() method, then the event "change" is not called.
jQuery syntax:
Syntax 1.0:$(selector ).change() // method is used without parameters$(selector ).change( handler) handler- Function (Event eventObject) Syntax 1.4.3:$(selector ).change( eventData, handler) eventData- Anything handler- Function (Event eventObject)Please note that the method .change(), used in conjunction with a function passed as a parameter ( handler) is a shorthand for the method .on(), and without a parameter is a shorthand for the method .trigger():
$(selector).on(" change", handler) $(selector ).trigger(" change")
Added in jQuery version
1.0 (syntax updated in version 1.4.3)Parameter values
Usage example
1type="checkbox"> 2type="checkbox">
In this example using jQuery method .change() we click on the element
Called or tracked JavaScript event"change" (form change event).
version added: 1.0.change(handler(eventObject))
handler(eventObject)
Type: Function()
Event handler function.
version added: 1.4.3.change(, handler(eventObject))
eventData
Type: Object
An object with data to be passed to the handler.
handler(eventObject)
Type: Function()
Event handler function
version added: 1.0.change()
This method is short for .on("change", handler), and .trigger("change").
The change event is fired when the form fields change. It tracks the fields ,
For example, we have following html:
An event handler can be attached like this:
$(".target").change(function() ( alert("Handler for .change() called."); ));
Now, when changing the value of the select element, we will see a message. It will also occur if other fields are changed, but after switching to others. If the element loses focus and no changes have been made, then the event is not fired. In order to trigger this event yourself, it is enough to call the .change() method without arguments:
$("#other").click(function() ( $(".target").change(); ));
After executing this code, we will see the message from the previous listing. This time we will see him twice, because. We have two elements in the form.
Examples:
Example: Track changes to the select box.
_element">
HTML
Body ( display: grid; grid-template-areas: "select result"; ) select ( grid-area: select; ) .result ( grid-area: result; )
JavaScript
const selectElement = document.querySelector(".ice-cream"); selectElement.addEventListener("change", (event) => ( const result = document.querySelector(".result"); result.textContent = `You like $(event.target.value)`; ));result
text input element
For some elements, including , 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
JavaScript
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 | Status |
---|---|
HTML Living Standard The definition of "change" in that specification. |
Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | edge | Firefox | Internet Explorer | Opera | safari | android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | |
change | Chrome Full supportYes | Edge Full support 12 | Firefox Full supportYes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full supportYes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
Full support Full supportDifferent browsers do not always agree whether a change event should be fired for certain types of interaction. For example, keyboard navigation in element represents a control that provides a menu of options">
Occurs immediately after the element's value has changed, and the onchange event occurs when the element loses focus. Another difference is that the onchange event has more broad support browsers and works with elements such as
Browser Support
Event attribute | Opera | IExplorer | edge |
|||
---|---|---|---|---|---|---|
change | Yes | Yes | Yes | Yes | Yes | Yes |
Syntax
Usage example
An example of displaying text typed in an element on focus change using the onchange event attribute. Note that if we had used the oninput event attribute, the text would have been displayed immediately instead of when the focus changed.
Type some text and remove focus from the element:
Type some text and remove focus from the element:
An example of displaying the value of the tag
Choose a wish from the list:
Choose a wish from the list:
Wish 1 Wish 2 Wish 3
Consider an example of changing the 2D rotation of an element using CSS property transform , HTML attribute onchange events and JavaScript functions:
Move the slider to rotate the element:
transform: rotate( 0deg);