OnBlur and OnFocus events fire in the wrong order?

Hi,

I'm having some problems with some javascript events firing in the wrong order under certain workflows. Here's the gist of it:

I have a form with many fields, mostly input type = text. Each field as an OnBlur and OnFocus event tied to javascript functions.

IE's website (http://msdn.microsoft.com/en-us/library/ms536909%28v=vs.85%29.aspx) states that "The onblur event fires on the original object before the onfocus or onclick event fires on the object that is receiving focus." and that is exactly what happens when tabbing through the fields.

The tricky part is that it doesn't perform this way when CLICKING to another field. When clicking to another field it performs the new field's OnFocus first, and then the first field's OnBlur event after. This is bad because the OnFocus sets a global variable's value to whatever value is in that box at the time it gets focus and if the onblur validation fails, that value is inserted back into the box. So what's happening is the validation for field 1 fails and the value from field 2 is then written into field 1.

This also seems to only happen when the page is opened as a modal window as opposed to just opening the page on it's own. It doesn't happen in FireFox, I've only been able to get it to happen on IE 8 + (haven't tried any other browsers.)

Anyone else have this happen to them? Does it sound like an IE bug?

Thanks

Instead of a global variable to hold presumably the initial value, you could use the defaultValue property of each field.

That's a good idea! That is the exact thing I'm doing with the onfocus!

Only problem is I don't know that I've ever used defaultValue. It is not listed as an attribute on the input tags:
http://www.w3schools.com/tags/tag_input.asp

I know you can set the value of it on load by using the value="XXX" attribute but when you change that it also changes the value shown on the page.

can you please give me more info on the defaultValue attribute?

can you please give me more info on the defaultValue attribute?
It isn't an attribute, it is a browser-assigned property.

It is not listed as an attribute on the input tags:
http://www.w3schools.com/tags/tag_input.asp



That's because it isn't an HTML attribute but rather a JavaScript property.

While the W3Schools site is extremely out of date (particularly with their JavaScript pages) they do have a page on it at http://www.w3schools.com/jsref/prop_text_defaultvalue.asp

Thanks for the suggestion and information Logic Ali and Felgall!

I've made a small test application and it appears to work as expected!

Thanks to both of you for helping me with that. I'd still like to know why IE behaves the way it does (other than the fact that IE is terrible.) but now that you've helped me find a solution I can implement it.

Thanks :)

There is no reason why events on different elements need to run in any particular order. The different events are completely unrelated and so it is up to each browser as to what order it decides to run them in.

The only situation where there is an order to events is where they are all triggered on the same element by the same action - such as double clicking triggering mousedown mouseup click mousedown mouseup click dblclick in that order - or where an event listener bubbles outward from the innermost element it is triggered on outward to the entire web page unless told to stop before it gets that far.

Even with two event listeners triggered by the same action on the same event and element can run in whichever order the browser decides to run them with no guarantees that browsers will all run them in the same order.