「入力」要素の「変更」イベントと「入力」イベントの違い

changeとinputイベントの違いは誰か教えてもらえますか？

それらを追加するためにjQueryを使用しています：

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

のinput代わりにも動作しますchange。

おそらく、フォーカスに対するイベントの順序に多少の違いがありますか？

この投稿によると：

• oninput イベントは、ユーザーインターフェイスを通じて要素のテキストコンテンツが変更されたときに発生します。

• onchange選択、チェックされた状態、または要素の内容が変更されたときに発生します。場合によっては、要素がフォーカスを失ったとき、またはreturn（Enter）を押して値が変更されたときにのみ発生します。onchange属性を一緒に使用することができます<input>、<select>と<textarea>。

TL; DR：

• oninput：テキストコンテンツに加えられた変更
• onchange：
  • それが<input />：変更+フォーカスを失う
  • それが<select>：の場合、オプションを変更します

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

• change event内容が変更され、要素が失われているほとんどのブラウザで火災focus。基本的には変更の集合です。ケースのように、すべての変更が発生するわけではありませんinput event。

• input event要素の内容の変化に同期し起動します。そのため、イベントリスナーはより頻繁に起動する傾向があります。

• 異なるブラウザーは、特定のタイプの対話に対して変更イベントを発生させる必要があるかどうかに常に同意するとは限りません

MDNのドキュメントには明確な説明があります（いつ追加されたかはわかりません）。

変更イベントは、焼成されinput、selectおよびtextarea要素の値に変更がユーザーによってコミットされたときの要素。入力イベントとは異なり、要素の値が変更されるたびに変更イベントが発生するわけではありません。

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