В чем разница между атрибутом onBlur и onChange в HTML?

117

Когда один вызывается по сравнению с другим? Была ли ситуация, когда onChange вызывался, а onBlur не вызывался?

html

— pacman
источник

171

onBlurСобытие вызывается , когда вы отошли от объекта , не обязательно, изменив его значение.

onChangeСобытие вызывается только тогда , когда вы изменили значение поля и теряет фокус.

Возможно, вы захотите взглянуть на введение quirksmode к событиям . Это отличное место для получения информации о том, что происходит в вашем браузере, когда вы с ним взаимодействуете. Его книга тоже хороша.

— Марк Дикинсон
источник

2

в вашей ссылке о quirksmode не говорится о размытии, а только об основных событиях

— stackdave

23

onblur срабатывает, когда поле теряет фокус, а onchange срабатывает, когда значение этого поля изменяется. Однако эти события не всегда будут происходить в одном и том же порядке.

В Firefox табуляция из измененного поля срабатывает при изменении, затем при размытии, и обычно это происходит в IE. Однако, если вы нажмете клавишу ввода вместо табуляции, в Firefox он будет запускать размытие, а затем изменение, тогда как IE обычно запускается в исходном порядке. Однако я видел случаи, когда IE также сначала запускал размытие, так что будьте осторожны. Вы не можете предполагать, что либо onblur, либо onchange произойдет раньше другого.

10

Пример для конкретизации. Если у вас есть выбор таким образом:

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

onblur()вызывается , когда вы уйдете. onchange()Вызывается при выборе другого варианта из выбора - то есть изменить то , что он в данный момент выбран.

— Брайан Агнью
источник

1

Другой пример: во входных данных типа numberнажатие стрелок вверх / вниз вызовет событие изменения (но не событие размытия), тогда как набор текста вызывает событие изменения только тогда, когда поле теряет фокус.

— Крис Миддлтон

7

В Firefox onchange срабатывает только тогда, когда вы нажимаете вкладку или щелкаете за пределами поля ввода. То же самое и с Onblur. Разница в том, что onblur сработает независимо от того, изменили ли вы что-нибудь в поле или нет. Возможно, что ENTER запустит один или оба из них, но вы не узнаете об этом, если отключите ENTER в своих формах, чтобы предотвратить непредвиденные отправки.

— Бетти Мок
источник

4

onBlur - это когда вы больше не сосредотачиваетесь на рассматриваемой области.

Свойство onblur возвращает код обработчика события onBlur, если таковой имеется, который существует в текущем элементе.

onChange - это когда значение поля изменяется.

— Олафур Вааге
источник

4

Я думаю, здесь важно отметить, что onBlur () срабатывает независимо.

Это полезная ветка, но единственное, что она не проясняет, это то, что onBlur () будет срабатывать каждый раз.

onChange () срабатывает только при изменении значения.

— PHP-б-грейдер
источник

3

onChange - это когда что-то в поле изменяется, например, вы что-то пишете во вводе текста.

onBlur - это когда вы убираете фокус с поля, например, вы вводили текст в поле ввода и щелкнули по нему.

На самом деле это почти одно и то же, но для того, чтобы onChange вел себя так, как onBlur, что-то в этом вводе необходимо изменить.

— Sam152
источник