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?

Disclaimer: Any viewpoints and opinions expressed in this article are those of Nicholas C. Zakas and do not, in any way, reflect those of my employer, my colleagues, Wrox Publishing, O'Reilly Publishing, or anyone else. I speak only for myself, not for them.