入力要素の「input」イベントと「change」イベントの違いは何ですか?

入力要素の入力イベントと変更イベント

HTML の input 要素を使用すると、ユーザーはテキストを入力および編集できます。これは、change と input という 2 つのイベント ハンドラーをサポートします。どちらのイベントも要素のテキスト コンテンツが変更されるとトリガーされますが、動作には微妙な違いがあります。

'input' イベント

入力イベントは常に発生します。

• 文字の入力
• 文字の削除
• テキストの選択
• テキストの貼り付け

通常、入力データをオンザフライで検証し、ユーザーに即時フィードバックを提供するために使用されます。

'change' イベント

change イベントは、テキストの内容が変更された後に要素がフォーカスを失ったときに発生します。つまり、変更イベントがトリガーされる前に、ユーザーはテキストを変更し、要素からフォーカスを移動する必要があります。

フォーカスを失うことに加えて、変更イベントは以下によってトリガーされる場合もあります。

• Enter キーを押す
• ドロップダウンでオプションを選択する
• チェックボックスのチェック状態を変更する

jQuery での使用法

次のように jQuery を使用して入力要素にイベント リスナーをアタッチできます。

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

// Equivalent to using 'input' instead of 'change'
$('input[type="text"]').on('input', function() {
    alert($(this).val());
});

イベントの順序

入力と変更の両方の場合イベントが同じ要素にアタッチされている場合、イベントは次の順序でトリガーされます:

1. On Input: Triggered every time the text content changes
2. On Change: Triggered when the element loses focus after the text content changes

この動作により、入力イベントで即時の変更を処理し、要素が変更イベントでフォーカスを失ったときにアクションを実行できます。 .

例

次の例は、入力イベントと変更イベントの違いを示しています。

$("input, select").on("input", function () {
    console.log("On input: " + this.tagName + " | " + this.value);
}).on("change", function () {
    console.log("On change: " + this.tagName + " | " + this.value);
});

テキスト入力に入力するとき、またはテキスト入力を選択するときドロップダウンのオプションを選択すると、次の出力が表示されます。

On input: INPUT | ...
On change: INPUT | ...

入力はキーストロークまたは文字の変更ごとにトリガーされますが、変更はフォーカスが失われた場合にのみトリガーされることに注意してください。

以上が入力要素の「input」イベントと「change」イベントの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。