139

When is one called versus the other? Is there a situation were onChange would be called but onBlur would not be called?

Clemzd
  • 895
  • 2
  • 15
  • 35
pacman
  • 2,050
  • 4
  • 16
  • 17

7 Answers7

200

The onBlur event is fired when you have moved away from an object without necessarily having changed its value.

The onChange event is only called when you have changed the value of the field and it loses focus.

You might want to take a look at quirksmode's intro to events. This is a great place to get info on what's going on in your browser when you interact with it. His book is good too.

DeveloperDan
  • 4,626
  • 9
  • 40
  • 65
Mark Dickinson
  • 6,573
  • 4
  • 29
  • 41
  • 3
    your link about quirksmode don't talk about blur, just basic events – stackdave Jan 19 '18 at 08:04
  • Just to be crystal clear, there are no situations where `change` is fired but `blur` is not, correct? – Indiana Kernick Jan 18 '21 at 08:20
  • @IndianaKernick The Enter key would trigger `change` but not `blur`. Also, selecting an option in a dropdown would only trigger `change` since the dropdown still has focus. – Brian Ortiz Oct 16 '21 at 17:36
  • Notice that you can’t use `onChange` to validate an empty field. The reason is that nothing is present when a form is first loaded, but since the form data hasn’t changed either, `onchange` won’t trigger even if a user navigates through empty form fields. onblur event solves this problem by always being triggered any time the input selection, or focus, leaves a field. – foobar Jul 02 '22 at 15:49
30

onblur fires when a field loses focus, while onchange fires when that field's value changes. These events will not always occur in the same order, however.

In Firefox, tabbing out of a changed field will fire onchange then onblur, and it will normally do the same in IE. However, if you press the enter key instead of tab, in Firefox it will fire onblur then onchange, while IE will usually fire in the original order. However, I've seen cases where IE will also fire blur first, so be careful. You can't assume that either the onblur or the onchange will happen before the other one.

14

An example to make things concrete. If you have a selection thus:

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

the onblur() is called when you navigate away. The onchange() is called when you select a different option from the selection - i.e. you change what it's currently selected as.

Brian Agnew
  • 268,207
  • 37
  • 334
  • 440
  • 1
    Another example: in inputs of type `number`, clicking the up/down arrows will fire a change event (but not a blur event), whereas typing only causes a change event when the field loses focus. – Chris Middleton Sep 21 '15 at 16:47
7

In Firefox the onchange fires only when you tab or else click outside the input field. The same is true of Onblur. The difference is that onblur will fire whether you changed anything in the field or not. It is possible that ENTER will fire one or both of these, but you wouldn't know that if you disable the ENTER in your forms to prevent unexpected submits.

Peter O.
  • 32,158
  • 14
  • 82
  • 96
Betty Mock
  • 1,373
  • 11
  • 23
7

I think it's important to note here that onBlur() fires regardless.

This is a helpful thread but the only thing it doesn't clarify is that onBlur() will fire every single time.

onChange() will only fire when the value is changed.

phoenix
  • 7,988
  • 6
  • 39
  • 45
php-b-grader
  • 3,191
  • 11
  • 42
  • 53
6

onChange is when something within a field changes eg, you write something in a text input.

onBlur is when you take focus away from a field eg, you were writing in a text input and you have clicked off it.

So really they are almost the same thing but for onChange to behave the way onBlur does something in that input needs to change.

Sam Becker
  • 19,231
  • 14
  • 60
  • 80
5

onBluris when your focus is no longer on the field in question.

The onblur property returns the onBlur event handler code, if any, that exists on the current element.

onChange is when the value of the field changes.

phoenix
  • 7,988
  • 6
  • 39
  • 45
Ólafur Waage
  • 68,817
  • 22
  • 142
  • 198