Unterschied zwischen "change" - und "input" -Ereignis für ein "input" -Element

108

Kann mir jemand sagen, was der Unterschied zwischen den changeund inputEreignissen ist?

Ich benutze jQuery, um sie hinzuzufügen:

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

Es funktioniert auch mit inputstatt change.

Vielleicht ein Unterschied in der Reihenfolge der Ereignisse in Bezug auf den Fokus?

javascript jquery events dom Gabriel Petrovay
quelle
rakshasingh.weebly.com/1/post/2012/12/… Beachten Sie, dass oninput in älteren Browsern nicht unterstützt wird. Sie können dann Folgendes verwenden: onchange, onpaste und onkeyup als Problemumgehung. PS: Ein Eingabeereignis ist auch in IE9 fehlerhaft und wird beim Löschen nicht ausgelöst.
A. Wolff
1
Die Eingabe wird häufiger ausgelöst, beispielsweise nach einem Tastendruck, während die Änderung im Grunde genommen ausgelöst wird, wenn die Eingabe unscharf ist und der Wert nicht dem entspricht, der er war, als die Eingabe fokussiert wurde.
Dandavis
Das inputEreignis erfasst auch das Einfügen. Siehe stackoverflow.com/questions/15727324/…
Antony
1
TLDR: Eingabe feuert während der Eingabe, ändern Sie das Feuer, wenn Sie nach draußen klicken
Muhammad Umer

Antworten:

117

Nach diesem Beitrag :

  • oninput Ereignis tritt auf, wenn der Textinhalt eines Elements über die Benutzeroberfläche geändert wird.

  • onchangetritt auf, wenn sich die Auswahl, der geprüfte Zustand oder der Inhalt eines Elements geändert haben . In einigen Fällen tritt dies nur auf, wenn das Element den Fokus verliert oder wenn Sie die returnEingabetaste drücken und der Wert geändert wurde. Das onchange Attribut kann mit verwendet werden: <input>, <select>, und <textarea>.

TL; DR:

  • oninput: Änderungen am Textinhalt
  • onchange::
    • Wenn es ein <input />: Ändern + Fokus verlieren
    • Wenn es sich um eine <select>: Änderungsoption handelt

$("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>
Erweitern Sie das Snippet

Ionică Bizău
quelle
7
Der Unterschied zwischen den beiden ist mir immer noch unklar. Sie klingen nach Ihren Beschreibungen sehr ähnlich.
Justin Morgan
10
@JustinMorgan Wie im JSFiddle-Beispiel tritt das onchangeauf, "wenn das Element den Fokus verliert", während das oninputbei jeder Textänderung auftritt.
Ionică Bizău
1
Der Unterschied besteht darin, dass das Ereignis oninput unmittelbar nach der Änderung des Werts eines Elements auftritt, während onchange auftritt, wenn das Element den Fokus verliert, nachdem der Inhalt geändert wurde.
NinoLopezWeb
1
Mit anderen Worten, "Eingabe" wird sofort ausgelöst, wenn ein Zeichen geändert, gelöscht oder hinzugefügt wird, während "Änderung" ausgewertet wird, nachdem das Steuerelement den Fokus verloren hat und nur dann erfolgt, wenn sich der Wert geändert hat
Adam Moszczyński
Ich habe es gerade mit Chrome versucht. onchangewird auch ausgelöst, wenn Sie die Eingabetaste drücken, während Sie noch fokussieren.
Rick
24

  • Das change eventwird in den meisten Browsern ausgelöst, wenn der Inhalt geändert wird und das Element verliert focus. Es ist im Grunde eine Ansammlung von Änderungen. Es wird nicht wie im Fall bei jeder einzelnen Änderung ausgelöstinput event .

  • Das input eventwird synchron ausgelöst, wenn der Inhalt des Elements geändert wird. Daher neigt der Ereignis-Listener dazu, häufiger zu feuern.

  • Verschiedene Browser sind sich nicht immer einig, ob für bestimmte Interaktionstypen ein Änderungsereignis ausgelöst werden soll

Gabe
quelle
Ich glaube nicht, dass das Eingabeereignis garantiert synchron ausgelöst wird.
Tim Down
Aktuelle Versionen aller Browser unterstützen das inputEreignis.
Tim Down
2
@ TimDown, deshalb habe ich gesagt, dass die Browserunterstützung unterschiedlich ist. Nicht jeder hat die aktuelle Version jedes Browsers.
Gabe
@ TimDown Wird es synchron ausgelöst?
Suraj Jain
@ SurajJain: Ich bin mir nicht sicher, um ehrlich zu sein.
Tim Down
1

Die MDN-Dokumentation enthält eine klare Erklärung (nicht sicher, wann sie hinzugefügt wurde):

Das Änderungsereignis wird für und Elemente ausgelöst input, wenn der Benutzer eine Änderung des Elementwerts festschreibt. Im Gegensatz zum Eingabeereignis wird das Änderungsereignis nicht unbedingt für jede Änderung des Werts eines Elements ausgelöst .selecttextarea

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

Joel H.
quelle