Event order of blur and change

I’m in the middle of fighting a battle with the blur and change events on a textbox. The requirement is simple: if the text changed in the textbox after losing focus, do one thing; if the text hasn’t changed when the textbox loses focus, do something else. This led me to an experiment to determine how blur and change events affected each other.

My initial assumption was that change would fire first since it’s a combination of a value change and blur, so if I prevented the default behavior of change that should effectively kill the blur event. I tested this hypothesis in Internet Explorer and found this to be the case. The change event fires first and, when the default action is prevented, it stops the blur event from firing. Thinking I had solved the problem, I did a quick double check in Firefox…naturally it didn’t work.

In Firefox, the blur event fires before the change event, so preventing the default behavior of change does nothing. A quick check of Opera 9 showed the same result as Firefox, thus indicating that Internet Explorer is probably the faulty implementation.

The specification states that neither blur nor change can be canceled and that only change bubbles, but doesn’t seem to provide any guidance on how the two should interact (if at all). I’m wondering who, then, has the correct implementation and who has the incorrect one? Does majority rule in this case?

Understanding JavaScript Promises E-book Cover

Demystify JavaScript promises with the e-book that explains not just concepts, but also real-world uses of promises.

Download the Free E-book!

The community edition of Understanding JavaScript Promises is a free download that arrives in minutes.