Change event (DOM, Javascript)

Devtool Chrome Event Listener


change is an event that is fired when:

  • a control loses the input focus
  • and its value has been modified since gaining focus.


You can attach a callback function to the change event with the onchange attribute.

This attribute applies only to the following elements:



An example with a two radio element that will fire the change event when choosing one or the other.

  • A serie of radio input with the same name (ie choice) and different value
<p>Select a radio to fire the change event</p>
<p><input type="radio" name="choice" id="choice1id" value="choice1" onchange="return handleChange(this);"><label for="choice1id">choice 1</label></p>
<p><input type="radio" name="choice" id="choice2id" value="choice2" onchange="return handleChange(this);"><label for="choice2id">choice 2 </label></p>
  • The callback to handle the change event.
let handleChange = (element) => {
   console.log("The event "+event.type+" was fired and the input radio button chosen has the value "+element.value);

Recommended Pages
Devtool Chrome Event Listener
DOM - Event Type (name)

An event is categorize by its type which is a property of the event object The type of an event is also known as the name of the event (Ref)...
Html Radio Illustration
HTML - Radio

HTML A radio represents a serie of mutually-exclusive choices in a form. It is an input element of type radio. A radio is round to distinguish from the square checkbox. As the checkbox, the...
Html Input File Multiple Warning Dialog
Javascript - Browser - File API

The file api is a browser javascript api that allows file system operation in the browser. FileApiopeneditsave Uploading a file: You can open and read files via the input of type file The...
Javascript - Debounce Function

A debounce is a function that: will wrap a callback function willnot let the callback function execute for each event will let the callback function execute only when a certain amount of time...

Share this page:
Follow us:
Task Runner