Are "blur" and "focus" events guaranteed in this order?
blur
:
The user agent MUST dispatch this event when the event target loses focus. Focus MUST be taken from the element before dispatching this event type.
focus
:
The user agent MUST dispatch this event when the target receives focus. Focus MUST be given to the element before dispatching this type of event.
Since neither of the two elements can have focus at the same time, it is reasonable to assume what blur
should happen before focus
.
source to share
Run the snippet below and focus the input on the left, then click on the input on the right and you can see the blur order -> focus -> focus (in Chrome), but if you check it in Safari it will be blur -> focus -> focus. So now you can't assume that different user agents implement the same order of events. Also, focus and blur are essentially the same thing. The difference is that the blur event does not bubble.
Edit: In response to your edit yes will always be blurry in front of focus.
var i1 = document.getElementById("i1");
var i2 = document.getElementById("i2");
var whatHappened = document.getElementById("whatHappened");
i1.addEventListener("focusout", function() {
var p = document.createElement("P");
p.innerText = "focusout";
whatHappened.appendChild(p);
});
i1.addEventListener("blur", function() {
var p = document.createElement("P");
p.innerText = "blur";
whatHappened.appendChild(p);
});
i2.addEventListener("focus", function() {
var p = document.createElement("P");
p.innerText = "focus";
whatHappened.appendChild(p);
});
<input type="text" id="i1" />
<input type="text" id="i2" />
<div id="whatHappened"></div>
source to share