Jaka jest różnica między atrybutami onBlur i onChange w HTML?

Kiedy jedno jest wezwane, a drugie? Czy jest sytuacja, w której onChange zostałby wywołany, ale onBlur nie zostałby wywołany?

onBlurZdarzenie jest zwolniony, kiedy zostały przeniesione z dala od obiektu bez konieczności po zmianie jej wartości.

onChangeZdarzenie jest wywoływane tylko po zmianie wartości pola i traci ostrość.

Możesz rzucić okiem na wprowadzenie do wydarzeń w quirksmode . To świetne miejsce, aby uzyskać informacje o tym, co dzieje się w Twojej przeglądarce podczas interakcji z nią. Jego książka też jest dobra.

onblur uruchamia się, gdy pole traci ostrość, natomiast onchange - gdy zmienia się wartość tego pola. Jednak zdarzenia te nie zawsze będą następować w tej samej kolejności.

W Firefoksie wyjście tabulatorem ze zmienionego pola spowoduje zmianę, a następnie zamazanie, i zwykle robi to samo w IE. Jeśli jednak naciśniesz klawisz Enter zamiast tabulatora, w Firefoksie uruchomi się onblur, a następnie onchange, podczas gdy IE zwykle uruchamia się w oryginalnej kolejności. Jednak widziałem przypadki, w których IE również wywoła rozmycie jako pierwsze, więc bądź ostrożny. Nie możesz zakładać, że onblur lub zmiana nastąpi wcześniej niż druga.

Przykład, aby uczynić rzeczy konkretnymi. Jeśli masz wybór w ten sposób:

<select onchange="" onblur="">
  <option>....
</select>

onblur()nazywa kiedy opuścisz. onchange()Nazywa się po wybraniu innej opcji z wyboru - czyli zmiany, co jest aktualnie wybrana.

W przeglądarce Firefox zmiana jest uruchamiana tylko wtedy, gdy klikniesz kartę lub klikniesz poza polem wejściowym. To samo dotyczy Onblur. Różnica polega na tym, że onblur będzie strzelał bez względu na to, czy zmieniłeś cokolwiek w polu, czy nie. Jest możliwe, że ENTER uruchomi jeden lub oba z nich, ale nie będziesz wiedział, że jeśli wyłączysz ENTER w swoich formularzach, aby zapobiec nieoczekiwanym przesłaniom.

onBlur występuje, gdy nie skupiasz się już na danym polu.

Właściwość onblur zwraca kod obsługi zdarzeń onBlur, jeśli istnieje, który istnieje w bieżącym elemencie.

onChange ma miejsce, gdy zmienia się wartość pola.

Myślę, że ważne jest, aby zauważyć, że onBlur () uruchamia się niezależnie.

Jest to pomocny wątek, ale jedyną rzeczą, której nie wyjaśnia, jest to, że onBlur () będzie uruchamiany za każdym razem.

onChange () uruchomi się tylko wtedy, gdy wartość zostanie zmieniona.

onChange ma miejsce, gdy coś w polu się zmienia, np. wpisujesz coś w polu tekstowym.

onBlur pojawia się, gdy odsuwasz fokus od pola, np. pisałeś w polu tekstowym i kliknąłeś je.

Więc tak naprawdę są prawie tym samym, ale aby onChange zachowywał się tak, jak onBlur robi coś w danych wejściowych, musi się zmienić.