Is it guaranteed that blur() event happens before the focus() when giving focus to a new element?
javascript, jquery
Solution
As of W3C draft DOM3 Events, the specification tells you:
Focus Event Order
The focus events defined in this specification occur in a set order relative to one another. The following is the typical sequence of events when a focus is shifted between elements (this order assumes that no element is initially focused):
> User shifts focus
> 1. focusin Sent before first target element receives focus
> 2. focus Sent after first target element receives focus
> User shifts focus
> 3. focusout Sent before first target element loses focus
> 4. focusin Sent before second target element receives focus
> 5. blur Sent after first target element loses focus
> 6. focus Sent after second target element receives focus
Note that the statement that there cannot be two elements with focus is not completely correct; although I am not aware of desktop environments that let two widgets have focus at the same time, the specification lets an implementation decide that:
Other specifications may define a more complex focus model than is described in this specification, including allowing multiple elements to have the current focus.
Also this is worth mention:
A host language may define specific elements which might receive focus, the conditions under which an element may receive focus, the means by which focus may be changed, and the order in which the focus changes. (italic is mine).
However, beware that Chrome does not follow the standard - instead the order is `blur, focusout, focus, focusin`. You can test this using this page. Webkit browsers may have the same issue. The `focusin` and `focusout` events are supported since Firefox 52.
Problem
Let's say I have two input fields. One has focus, then I click on the other input field. Is it guaranteed that the `blur()` event (of the first element that lost focus) happens before the `focus()` event (other element got focus) ?