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?

javascript jquery events dom 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