web-dev-qa-db-ja.com

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

changeイベントとinputイベントの違いを教えてください。

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

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

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

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

javascriptjqueryeventsdom
88
Gabriel Petrovay

この投稿 によると：

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

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

TL; DR：

  • oninput：テキストの内容に加えられた変更
  • onchange：
    • <input />の場合：変更+フォーカスを失う
    • <select>：変更オプションの場合
$("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>
93
Ionică Bizău

  • changeeventは、コンテンツが変更され、エレメントがfocusを失うと、ほとんどのブラウザーで起動します。基本的には変更の集合です。 inputeventの場合のように、すべての変更に対して起動するわけではありません。

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

  • さまざまなブラウザーは、特定のタイプの対話に対して変更イベントを起動する必要があるかどうかに必ずしも同意しません。

22
Gabe

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

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

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

0
Joel H