javascript - 「input」要素の「change」イベントと「input」イベントの違い

Question

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

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

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

inputの代わりにも機能しますchange。

フォーカスに関連するイベントの順序に違いがあるのでしょうか?

Answer 1

この投稿によると：

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

• onchange要素の選択、チェック状態、またはコンテンツが変更されたときに発生します。場合によっては、要素がフォーカスを失ったとき、またはreturn(Enter) を押して値が変更されたときにのみ発生します。<input>onchange 属性は、 、<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>

Answer 2

• change eventコンテンツが変更され、要素が失われると、ほとんどのブラウザで が起動しますfocus。これは基本的に変更の集計です。の場合のように、変更ごとに起動するわけではありませんinput event。

• は、要素のinput eventコンテンツが変更されると同期的に起動します。そのため、イベント リスナーはより頻繁に起動する傾向があります。

• 特定の種類のインタラクションに対して変更イベントを発生させる必要があるかどうかは、ブラウザによって異なる場合があります。