Fire onblur event before onchange event
dom, html, javascript, jquery, jquery-events
Solution
The reason `onchange` fires first is that once the element loses focus (i.e. 'blurs') the change is usually complete (I say usually because a script can still change the element without user interaction).
For those elements that need `onblur` handled first, you can disable the `onchange` handler and fire the `onchange` (or even a custom event) from the `onblur` handler. This will ensure the correct order even though it is more work. To detect change, you can use a state variable for that field.
As a general remark though, the need for such synchronicity is a sign that the approach you are using to solve whatever problem you are solving might need more work even though sometimes it cannot be avoided. If you are sure this is the only way, try one of these methods!
EDIT: Just to elaborate on the last point, you would have to follow some assumptions about your event model. Are you assuming that each `change` event is followed by a `blur` and goes unprocessed otherwise, or would you like to process each `change` but those that are followed by a `blur`get further processing after whatever `onblur` does with them? In any case if you want to enforce the order the handlers would need access to a common resource (global variable, property, etc.). Are there other event types you might want to use? (`input`?). Finally, this link has some details for the `change` event for Mozilla browsers: https://developer.mozilla.org/en-US/docs/Web/Reference/Events/change. The third 'bullet' addresses the issue of event order.
Problem
I have a large form that contains several text input fields. Essentially, I need to handle the `onchange` event for all fields and the `onblur` events for some fields. When a change is made to a field and the field loses focus, both events fire (which is the correct behavior). The only issue is that I would like to handle the `onblur` event before I handle the `onchange` event. After some testing in ie and Firefox, it seems that the default behavior is to fire the `onchange` event before `onblur`. I have been using the following code as a test... ``` <html> <body > <input type="text" value="here is a text field" onchange="console.log('Change Event!')" onblur="console.log('Blur Event!')" > </body> </html> ``` Which brings me to my questions: It seems that this behavior is consistent across browsers. Why does `onchange` fire first? Since I cannot handle the `onblur` event for every input element, is there a way I can get `onblur` to fire before handling the `onchange` event?