Javascript ChangeEvent Tutorial with Examples
1. ChangeEvent
No ADS
The change event fires in the following situations:
- Users check/uncheck on <input type="checkbox">.
- Users make changes on <input type="radio">.
- Users change the value of <input> (file, color, range).
- Users change the contents of <input> (text, number, email, password, tel, time, week, month, date, datetime-local, search, url), then focus on other place.
- Users change the contents of <textarea>, then focus on other place.
- Users change the option on the <select> element.
ChangeEvent inherit all the properties and method of interface Event.
- Hướng dẫn và ví dụ Javascript Event
Example with the change event:
changeevents-elements-example.html
<!DOCTYPE html>
<html>
<head>
<title>ChangeEvent Example</title>
<meta charset="UTF-8">
<style>.title {font-weight:bold;}</style>
<script>
function changeHandler(evt) {
alert("Changed!");
}
</script>
</head>
<body>
<h2>ChangeEvent example</h2>
<p class="title">Input (checkbox, radio):</p>
<input type="checkbox" onchange ="changeHandler(event)"/>
<input type="radio" name ="gender" value="M" onchange ="changeHandler(event)"/>
<input type="radio" name ="gender" value="F" onchange ="changeHandler(event)"/>
<p class="title">Input (range):</p>
<input type="range" min ="1" max="10" onchange ="changeHandler(event)"/>
<p class="title">Input (color):</p>
<input type="color" onchange ="changeHandler(event)"/>
<p class="title">Input (file):</p>
<input type="file" onchange ="changeHandler(event)"/>
<p class="title">Input (image, hidden, buton, submit, reset):</p>
- (Not support 'change' event)
<p class="title">Input (text, number, email, password, tel, time, week, month, date, datetime-local, search, url):</p>
<input type="text" onchange ="changeHandler(event)"/>
<p class="title">Textarea element</p>
<textarea onchange ="changeHandler(event)" rows="3" cols="30"></textarea>
<p class="title">Select:</p>
<select onchange ="changeHandler(event)">
<option value ="en">English</option>
<option value ="de">German</option>
<option value ="vi">Vietnamese</option>
</select>
<p id="log-div"></p>
</body>
</html>
Example with the change event on the <select> element:
changeevents-select-example.html
<!DOCTYPE html>
<html>
<head>
<title>ChangeEvent Example</title>
<meta charset="UTF-8">
<script>
function changeHandler(evt) {
alert("Language: " + evt.target.value);
}
</script>
</head>
<body>
<h2>ChangeEvent example</h2>
<p class="title">Select Language:</p>
<select onchange ="changeHandler(event)">
<option value ="en">English</option>
<option value ="de">German</option>
<option value ="vi">Vietnamese</option>
</select>
</body>
</html>
Event: change vs input
You may consider using the input event because it's quite similar to the change event:
- The input event occurs immediately after the value of an element changes, without requiring the element to lose focus.
- The input event supports elements with the contenteditable="true" attibutes. While change event supports only the <input>, <texarea>, <select> element.
No ADS
ECMAScript, Javascript Tutorials
- Javascript Screen Tutorial with Examples
- Javascript MouseEvent Tutorial with Examples
- Javascript XMLHttpRequest Tutorial with Examples
- JavaScript if else Statement Tutorial with Examples
- JavaScript Promise, Async/Await Tutorial with Examples
- Javascript History API Tutorial with Examples
- Javascript Menubar Tutorial with Examples
- Javascript Location Tutorial with Examples
- JavaScript Boolean Tutorial with Examples
- JavaScript setTimeout and setInterval Function
- Javascript FocusEvent Tutorial with Examples
- JavaScript Functions Tutorial with Examples
- Introduction to Javascript HTML5 Canvas API
- Javascript Navigator Tutorial with Examples
- Javascript URL Encoding Tutorial with Examples
- JavaScript Variables Tutorial with Examples
- Javascript InputEvent Tutorial with Examples
- Javascript HashChangeEvent Tutorial with Examples
- Introduction to Javascript and ECMAScript
- Javascript Window Tutorial with Examples
- Alert, Confirm, Prompt Dialog Box in Javascript
- Javascript WheelEvent Tutorial with Examples
- JavaScript Switch Statement
- Javascript Locationbar Tutorial with Examples
- Highlighting code with SyntaxHighlighter Javascript library
- What are polyfills in programming science?
- Class and inheritance simulation techniques in JavaScript
- Bitwise Operations
- Javascript Geolocation API Tutorial with Examples
- JavaScript Symbols Tutorial with Examples
- Javascript FileReader Tutorial with Examples
- JavaScript JSON Tutorial with Examples
- JavaScript Date Tutorial with Examples
- JavaScript Map Collection Tutorial with Examples
- Javascript Console Tutorial with Examples
- JavaScript Strings Tutorial with Examples
- JavaScript Modules Tutorial with Examples
- Javascript Form Validation Tutorial with Examples
- Javascript ChangeEvent Tutorial with Examples
- JavaScript Number Tutorial with Examples
- The History of Modules in JavaScript
- Javascript Statusbar Tutorial with Examples
- Undertanding JavaScript Iterables and Iterators
- Quickstart with Javascript
- JavaScript Event Handling Tutorial with Examples
- JavaScript void Keyword Tutorial with Examples
- Classes and Objects in JavaScript
- JavaScript Set Collection Tutorial with Examples
- Javascript DragEvent Tutorial with Examples
- JavaScript Loops Tutorial with Examples
- Inheritance and polymorphism in JavaScript
- Javascript Scrollbars Tutorial with Examples
- Parsing XML in Javascript with DOMParser
- Quickstart with JavaScript
- JavaScript Web Cookies Tutorial with Examples
- Javascript KeyboardEvent Tutorial with Examples
- Javascript Fetch API Tutorial with Examples
- JavaScript Error Handling Tutorial with Examples
- Undertanding Duck Typing in JavaScript
- JavaScript Arrays Tutorial with Examples
- JavaScript Regular Expressions Tutorial with Examples
Show More