Difference between “change” and “input” event for an `input` element

by

According to this post:

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

  • onchange occurs when the selection, the checked state, or the contents of an element have changed. In some cases, it only occurs when the element loses the focus or when pressing return (Enter) and the value has been changed. The onchange attribute can be used with: <input>, <select>, and <textarea>.

TL;DR:

  • oninput: any change made in the text content
  • onchange:
    • If it is an <input />: change + lose focus
    • If it is a <select>: change option
$("input, select").on("input", function () {
    $("pre").prepend("\nOn input. | " + this.tagName + " | " + this.value);
}).on("change", function () {
    $("pre").prepend("\nOn change | " + this.tagName + " | " + this.value);
}).on("focus", function () {
    $("pre").prepend("\nOn focus | " + this.tagName + " | " + this.value);
}).on("blur", function () {
    $("pre").prepend("\nOn blur | " + this.tagName + " | " + this.value);
});
<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>

More Related Contents:

  1. jQuery .live() vs .on() method for adding a click event after loading dynamic html
  2. Firing event on DOM attribute change
  3. JavaScript: DOM load events, execution sequence, and $(document).ready()
  4. jQuery events .load(), .ready(), .unload()
  5. Unloading/Removing content from an iFrame
  6. jQuery document.createElement equivalent?
  7. When should I use jQuery’s document.ready function?
  8. Difference between HTMLCollection, NodeLists, and arrays of objects
  9. How to show Page Loading div until the page has finished loading?
  10. JavaScript / jQuery: Test if window has focus
  11. How to stop event bubbling on checkbox click
  12. What is difference between width, innerWidth and outerWidth, height, innerHeight and outerHeight in jQuery
  13. ‘this’ does not work properly in another event. I’m clueless as to why [duplicate]
  14. Pass mouse events through absolutely-positioned element
  15. jQuery equivalent of JavaScript’s addEventListener method
  16. How to find a parent with a known class in jQuery?
  17. jQuery count child elements
  18. jQuery live scroll event on mobile (work around)
  19. how to move a div with arrow keys
  20. jQuery Change event on an element – any way to retain previous value?
  21. jQuery Mobile : What is the order of page events triggering?
  22. How to unbind a specific event handler
  23. Event propagation in Javascript
  24. Storing a variable in the JavaScript ‘window’ object is a proper way to use that object?
  25. How to disable mouseout events triggered by child elements?
  26. Prototype equivalent for jQuery live function
  27. jquery keypress event object keyCode for firefox problem?
  28. What’s the difference between a jQuery object and a DOM element? Difference between .get() and .index()?
  29. In web browsers, what’s the difference between onblur and onfocusout?
  30. Create a table in SVG

Leave a Comment