Różnica między zdarzeniem „zmiana” i „wejście” dla elementu „input”

109

Czy ktoś może mi powiedzieć, jaka jest różnica między wydarzeniami changea input?

Używam jQuery do ich dodawania:

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

Działa również z inputzamiast change.

Może jakaś różnica w kolejności wydarzeń w stosunku do skupienia?

— Gabriel Petrovay
źródło

rakshasingh.weebly.com/1/post/2012/12/... Zauważ, że oninput nie jest obsługiwana w starszej przeglądarce. Możesz wtedy użyć: onchange, onpaste i onkeyup jako obejścia. PS: zdarzenie oninput jest również błędne w IE9 i nie jest uruchamiane przy usuwaniu.

— A. Wolff

wejście uruchamia się częściej, jak po naciśnięciu klawisza, podczas gdy zmiana zasadniczo uruchamia się, gdy wejście jest zamazane, a wartość nie jest taka, jaka była, gdy wejście było skupione.

— dandavis

inputZdarzenie rejestruje również wklejenie. Zobacz stackoverflow.com/questions/15727324/…

— Antony,

TLDR: wejście uruchamia się podczas pisania, zmienia ogień po kliknięciu na zewnątrz

— Muhammad Umer

Odpowiedzi:

117

Według tego postu :

oninput zdarzenie występuje, gdy zawartość tekstowa elementu zostanie zmieniona za pośrednictwem interfejsu użytkownika.
onchangewystępuje, gdy wybór, stan zaznaczenia lub zawartość elementu uległy zmianie . W niektórych przypadkach występuje tylko wtedy, gdy element traci fokus lub po naciśnięciu klawisza return(Enter), a wartość została zmieniona. Atrybut onchange można stosować z: <input>, <select>, i <textarea>.

TL; DR:

oninput: wszelkie zmiany wprowadzone w treści tekstu
onchange:
- Jeśli to <input />: zmień + stracić skupienie
- Jeśli to <select>: zmień opcję

$("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>

Rozwiń fragment

— Ionică Bizău
źródło

Nadal nie wiem, jaka jest różnica między nimi. Z twoich opisów brzmią bardzo podobnie.

— Justin Morgan

@JustinMorgan Podobnie jak w przykładzie JSFiddle, onchangewystępuje „gdy element traci fokus”, podczas gdy oninputwystępuje przy każdej zmianie tekstu.

— Ionică Bizău

Różnica polega na tym, że zdarzenie oninput występuje natychmiast po zmianie wartości elementu, podczas gdy onchange następuje, gdy element traci fokus, po zmianie treści.

— NinoLopezWeb

Innymi słowy "wejście" jest wyzwalane natychmiast po zmianie, usunięciu lub dodaniu dowolnego znaku, podczas gdy "zmiana" jest oceniana po utracie przez kontrolkę i dzieje się tylko wtedy, gdy wartość uległa zmianie

— Adam Moszczyński

Właśnie próbowałem z Chrome. onchangeuruchamia się również po naciśnięciu klawisza Enter, podczas gdy nadal koncentrujesz.

— Rick

Te change eventpożary w większości przeglądarek, gdy zawartość jest zmieniana i element traci focus. Zasadniczo jest to zbiór zmian. Nie będzie odpalać przy każdej zmianie, jak w tym przypadku input event.
Te input eventpożary synchronicznie na zmianę zawartości dla tego elementu. W związku z tym detektor zdarzeń ma tendencję do częstszego uruchamiania.
Różne przeglądarki nie zawsze zgadzają się, czy zdarzenie zmiany powinno być uruchamiane w przypadku określonych typów interakcji

— Gabe
źródło

Nie sądzę, aby zdarzenie wejściowe było gwarantowane synchronicznie.

— Tim Down

Ponadto obecne wersje wszystkich przeglądarek obsługują inputwydarzenie.

— Tim Down

@TimDown, dlatego powiedziałem, że obsługa przeglądarek jest różna. Nie każdy ma aktualną wersję każdej przeglądarki.

— Gabe

@TimDown Czy działa synchronicznie?

— Suraj Jain

@SurajJain: Nie jestem pewien, jeśli mam być szczery.

— Tim Down

Dokumentacja MDN ma jasne wyjaśnienie (nie jestem pewien, kiedy została dodana):

Impreza zmiana jest zwolniony za input, selecti textareaelementy, gdy zmiana wartości tego elementu jest zaangażowana przez użytkownika. W przeciwieństwie do zdarzenia wejściowego, zdarzenie zmiany niekoniecznie jest wywoływane dla każdej zmiany wartości elementu .

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

— Joel H.
źródło