it-swarm.com.de

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

Kann mir jemand sagen, was der Unterschied zwischen den Ereignissen change und input ist?

Ich benutze jQuery, um sie hinzuzufügen:

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

Es funktioniert auch mit input anstelle von change.

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

88

Laut dieser Beitrag :

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

  • onchange tritt auf, wenn sich die Auswahl, der geprüfte Zustand oder der Inhalt eines Elements geändert hat . In einigen Fällen tritt es nur auf, wenn das Element den Fokus verliert. Das Attribut onchange kann verwendet werden mit: <input>, <select> Und <textarea>.

TL; DR:

  • oninput: Änderungen am Textinhalt
  • onchange:
    • Wenn es ein <input /> Ist: Ändern + Fokus verlieren
    • Wenn es sich um einen <select> Handelt: Option ändern
$("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
  • Das changeevent wird in den meisten Browsern ausgelöst, wenn der Inhalt geändert wird und das Element focus verliert. Es ist im Grunde eine Ansammlung von Änderungen. Es wird nicht für jede einzelne Änderung ausgelöst, wie im Fall inputevent.

  • Das inputevent wird beim Ändern des Inhalts für das Element synchron ausgelöst. Aus diesem Grund wird der Ereignis-Listener häufiger ausgelöst.

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

22
Gabe

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

Das Änderungsereignis wird für input-, select- und textarea -Elemente ausgelöst, wenn der Benutzer eine Änderung am Wert des Elements festschreibt. Im Gegensatz zum Eingabeereignis wird das Änderungsereignis nicht unbedingt bei jeder Änderung des Werts eines Elements ausgelöst .

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

0
Joel H