Was ist der Unterschied zwischen "Change" und "Input" -Ereignis für ein INPUT-Element

Question

Kann mir jemand sagen, was der Unterschied zwischen den change und input Ereignissen ist?

ich jQuery bin mit ihnen für das Hinzufügen von:

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

Es funktioniert auch mit input statt change.

Vielleicht ein Unterschied in der Reihenfolge der Ereignisse relativ zum Fokus?

Answer 1

Nach this post:

• oninput Ereignis tritt auf, wenn der Textinhalt eines Elements über die Benutzeroberfläche geändert wird.

• onchange tritt auf, wenn die Auswahl, der Überprüfungsstatus oder der Inhalt eines Elements geändert hat. In einigen Fällen tritt es nur auf, wenn das Element den Fokus verliert. Das onchange-Attribut kann verwendet werden mit: <input>, <select> und <textarea>.

TL; DR:

• oninput: jeder in dem Textinhalt vorgenommene Änderung
• onchange:
  • Wenn es eine <input />: Veränderung + Fokus verlieren
  • Wenn es eine <select>: Änderung Option

$("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

• Die changeevent Brände in den meisten Browsern, wenn der Inhalt geändert wird und verliert das Element focus, im Grunde ein Aggregat von Änderungen. Sie sehen dies nicht für jede einzelne geändert im Gegensatz zu der inputevent gefeuert.

• Die inputevent wird synchron bei Änderung des Inhalts für das Element ausgelöst. Sie werden sehen, dass dieses Ereignis öfter auftritt. Die Browserunterstützung variiert.