Unterschied zwischen "ändern" und "input" - Ereignis für ein `input` - element

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

Bin ich mit Hilfe von jQuery für das hinzufügen von Ihnen:

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

Funktioniert es auch mit input statt change.

Vielleicht einen Unterschied im Falle der Bestellung von relativen zu konzentrieren?

  • rakshasingh.weebly.com/1/post/2012/12/... Beachten Sie, dass oninput wird nicht unterstützt, ältere browser. Sie verwenden konnte, dann: onchange, onpaste und onkeyup dieses Problem zu umgehen. PS: oninput-event ist auch buggy in IE9 und es nicht ausgelöst wird, auf löschen.
  • input feuert häufiger, wie nach einem Tastendruck, in der Erwägung, dass im Allgemeinen ändern wird ausgelöst, wenn der Eingang ist verschwommen, und der Wert ist nicht, was es war, wenn der Eingang ausgerichtet war.
  • Die input Ereignis erfasst auch einfügen. Siehe stackoverflow.com/questions/15727324/...
  • TLDR: input feuert während der Eingabe, ändern Sie Feuer, wenn Sie auf außerhalb
InformationsquelleAutor Gabriel Petrovay | 2013-06-11
  1. 93

    Laut dieser Beitrag:

    • oninput Ereignis tritt ein, wenn der text-Inhalt eines Elements über die Benutzeroberfläche geändert.

    • onchange tritt auf, wenn die Auswahl der aktivierten Zustand oder der Inhalt eines Elements geändert haben. In einigen Fällen, es tritt nur auf, wenn das element den Fokus verliert. Das onchange-Attribut kann verwendet werden mit: <input>, <select>, und <textarea>.

    TL;DR:

    • oninput: jede änderung im text Inhalt
    • onchange:
      • Wenn es ein <input />: ändern + Fokus verlieren
      • Wenn es ein <select>: ändern Sie die option

    JS:

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

    HTML:

    <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>

    • Ich bin immer noch unklar, auf den Unterschied zwischen den beiden. Sie klingen sehr ähnlich aus deinen Beschreibungen.
    • Wie im JSFiddle Beispiel, die onchange tritt ", wenn das element den Fokus verliert", während die oninput tritt auf jeden text ändern.
    • Der Unterschied ist, dass das oninput-event erfolgt sofort, nachdem der Wert eines Elements geändert wurde, während die onchange tritt auf, wenn das element den Fokus verliert, nachdem der Inhalt geändert wurde.
    • In anderen Worten, "input" wird sofort ausgelöst, wenn ein beliebiger Charakter ist verändert, gelöscht oder Hinzugefügt wurde, während Sie "ändern" ausgewertet wird, nachdem das Steuerelement den Fokus verliert und das passiert nur, wenn der Wert sich geändert hat
    InformationsquelleAutor Ionică Bizău
  2. 22

    • Den change event feuert in den meisten Browsern, wenn der Inhalt geändert wird und
      das element verliert focus. Es ist im Grunde eine Anhäufung von Veränderungen. Es wird nicht ausgelöst, für jede einzelne änderung, wie im Fall input event.

    • Den input event feuert synchron auf änderung der Inhalte für das element. Als solche, die Ereignis-listener-neigt zu Feuer häufiger.

    • Verschiedenen Browsern nicht immer einig, ob ein change-Ereignis gefeuert werden sollen, die für bestimmte Arten der Interaktion

    • Ich glaube nicht, dass der input-event ist garantiert Feuer synchron.
    • Auch aktuelle Versionen von allen Browsern unterstützt den input Veranstaltung.
    • das ist, warum ich sagte, browser-Unterstützung variiert. Nicht jeder hat die aktuelle version von jedem browser.
    • Fair enough....
    • Hat es Feuer synchron?
    • Ich bin mir nicht sicher, um ehrlich zu sein.
    • Was meinst du mit synchron? In JavaScript ist alles synchronisiert mit der Ereignis-Schleife. Dies bedeutet, dass Funktionen niemals unterbrochen werden, die für die Ausführung von anderem code in Ihre Umgebung.
    • Ich habe nicht bekommen, was Sie zu sagen versuchen, ich bin neu in JS.
    • Ich weiß nicht, was du meinst mit "synchron" in diesem Fall. Mit welcher Betrieb könnte es synchronisiert werden?

    InformationsquelleAutor Gabe
  3. 0

    MDN-Dokumentation hat eine klare Erklärung (nicht sicher, Wann es Hinzugefügt wurde):

    Das change-Ereignis ausgelöst wird für input, select, und textarea Elemente bei einer änderung des Elements Wert ist, begangen durch die Nutzer. Im Gegensatz zu den Eingabe-Ereignis das change-Ereignis wird nicht unbedingt gefeuert für jede änderung um den Wert eines Elements.

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

    InformationsquelleAutor Joel H
Schreibe einen Kommentar