There are different input types for different elements such as textbox, radio button or checkbox. When you give input and then moves to another element, such as pressing the button or mouse over the button, the change event comes into action. However, when we are focused on the input, the change event does not work. Let's see with the help of some examples.
Below are some examples that will make us understand the usage of the change event:
Using change event on input element as text:
The output of the above code is shown below:
When we click on the 'Click me' button, the focus is lost from the textbox which means that change event will come into action. Also, we can see that when we provide the input, the change event will not work. After clicking on the button, the text is displayed in the label.
Using onChange attribute:
In the above code, when we type some text in the textbox, the onChange event focus is out but as soon we click somewhere on the screen the onChange attribute comes into action.
Using change event on radio box buttons
In case of the radio box buttons, the change event comes into role after we select any of the radio button. We will see in the below code:
The output of the above is shown below:
When we click on any of the radio buttons, the specified message is displayed which means that on clicking on the radio button, the focus is lost from it.
Using change event on select element
In the case of select element, the change event works when the selection of a particular value is completed. Below we have discussed an example through which we can understand the working of select element over a value.
In the above output, we can see that when we select the value from the list, the name gets displayed beside it. It is because when we select a value, i.e., when the selection is completed, the change event comes into role. But, while we are making the selection, the change event does not work.