Achange event is a way of entering and passing data thru a form without using a submit button. The change event occurs when the element has completed changing, or when an element looses focus in some way. The change event will produce a different result depending on the type of element that the change event is being applied to.
Let's start with a simple text input. The change event of an <input> element fires when the <input> element loses focus (when you "click" out of the <input> element). The change event does not fire when you’re typing. So, let's add the <input> element:
<input type="text">
We will also add an <h6> element that we can use to display the text, that is entered in our <input> element.
<h6>Default Heading Text</h6>
This will give us:
Default Heading Text
Remember, we are using the change event on this text input,
input.addEventListener('change', function () {
So we can see that as we type data into the text input, nothing changes. But as soon as we hit [ENTER], click off of the <input> field, or in some way, cause the text input to loose focus, then the <h6> will update with the new text.
But what if we wanted a more direct way of updating our <h6> element? We can use a different type of form event called "input". Unlike the change event that only fires when the value is committed (looses focus), the input event fires whenever the value changes, live, and in real time. We'll create a new h6 and text input to demonstrate.
But instead of using a change event like above, we are going to use an input event:
input.addEventListener('input', function () {
Default Heading Text
So now when we change data in the text input, the <h6> will update automatically, live, and in real time.