The difference between the "change" and the "input" of the event for the "input" element

Question

Can someone tell me what is the difference between change and input events?

I use jQuery to add them:

 $('input[type="text"]').on('change', function() { alert($(this).val()); }) 

It also works with input instead of change .

Maybe there is some difference in the ordering of events relative to the focus?

Answer 1

According to this post :

• The oninput event occurs when the text content of an element is changed through the user interface.

• onchange occurs when the selection, checked state, or content of an item has changed . In some cases, this happens only when the element loses focus. The onchange attribute can be used with: <input> , <select> and <textarea> .

TL; DR:

• oninput : any changes to text content
• onchange :
  • If it is <input/> : change + lose focus
  • If it is <select> : change the parameter

 $("input, select").on("input", function () { $("pre").prepend("\nOn input. | " + this.tagName); }).on("change", function () { $("pre").prepend("\nOn change | " + this.tagName); }).on("focus", function () { $("pre").prepend("\nOn focus | " + this.tagName); }).on("blur", function () { $("pre").prepend("\nOn blur | " + this.tagName); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" /> <select> <option>Alice</option> <option>Bob</option> <option>Carol</option> <option>Dave</option> <option>Emma</option> </select> <pre></pre> 

Answer 2

• event change triggered in most browsers when the content changes and the element loses focus . This is basically a collection of changes. It will not work for each individual change, as in the case of event input .

• event input triggered synchronously when the content of an element changes. Thus, an event listener tends to fire more often.

• Different browsers do not always agree on whether to trigger a change event for certain types of interaction.

Answer 3

The MDN documentation has a clear explanation (not sure when it was added):

The change event is raised for input , select and textarea elements when the user commits a change in the value of an element. Unlike an input event, a change event is not necessarily triggered every time an element value changes .

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event