Was sind die Unterschiede zwischen \'input\'- und \'change\'-Ereignissen für Eingabeelemente?

Eingabe- und Änderungsereignisse für Eingabeelemente

Das Eingabeelement in HTML ermöglicht Benutzern die Eingabe und Bearbeitung von Text. Es unterstützt zwei Ereignishandler: Änderung und Eingabe. Beide Ereignisse werden ausgelöst, wenn der Textinhalt des Elements geändert wird, sie weisen jedoch geringfügige Unterschiede in ihrem Verhalten auf.

'input'-Ereignis

Das Eingabeereignis tritt immer ein Jede Änderung wird am Textinhalt des Elements vorgenommen, einschließlich:

• Eingeben eines Zeichens
• Löschen eines Zeichens
• Auswählen von Text
• Einfügen von Text

Es wird normalerweise verwendet, um Eingabedaten im Handumdrehen zu validieren und dem Benutzer sofortiges Feedback zu geben.

'change'-Ereignis

Das Ein Änderungsereignis tritt auf, wenn das Element den Fokus verliert, nachdem eine Änderung am Textinhalt vorgenommen wurde. Mit anderen Worten: Der Benutzer muss sowohl den Text ändern als auch den Fokus vom Element wegbewegen, bevor das Änderungsereignis ausgelöst wird.

Das Änderungsereignis kann nicht nur den Fokus verlieren, sondern auch durch Folgendes ausgelöst werden:

• Drücken der Eingabetaste
• Auswählen einer Option in einem Dropdown-Menü
• Ändern des aktivierten Status eines Kontrollkästchens

Verwendung in jQuery

Sie können Ereignis-Listener mit jQuery wie folgt an Eingabeelemente anhängen:

$('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());
});

Ereignisreihenfolge

Bei Eingabe und Änderung Wenn Ereignisse an dasselbe Element angehängt sind, werden sie in der folgenden Reihenfolge ausgelöst:

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

Mit diesem Verhalten können Sie sofortige Änderungen mit dem Eingabeereignis verarbeiten und Aktionen ausführen, wenn das Element mit dem Änderungsereignis den Fokus verliert .

Beispiel

Das folgende Beispiel zeigt den Unterschied zwischen Eingabe- und Änderungsereignissen:

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

Bei der Eingabe in eine Texteingabe oder beim Auswählen eines Wenn Sie die Option in einem Dropdown-Menü auswählen, sehen Sie die folgende Ausgabe:

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

Beachten Sie, dass die Eingabe bei jedem Tastendruck oder jeder Zeichenänderung ausgelöst wird, während eine Änderung erst ausgelöst wird, wenn der Fokus verloren geht.

Das obige ist der detaillierte Inhalt vonWas sind die Unterschiede zwischen \'input\'- und \'change\'-Ereignissen für Eingabeelemente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!