For example, given the following code, when I first click the parent and then click the child element, the events always seem to fire in this order MOUSEDOWN, FOCUSOUT, FOCUSIN:
html
<div
id="parent"
tabindex="0"
style="background-color: blue; height: 100px; width: 100px;">
<div
id="child"
tabindex="0"
style="background-color: red; height: 50px; width: 50px;">
</div>
</div>
js
var node = document.getElementById('parent');
node.addEventListener('mousedown', function () {
console.log("MOUSEDOWN");
});
node.addEventListener('focusin', function () {
console.log("FOCUSIN");
});
node.addEventListener('focusout', function () {
console.log("FOCUSOUT");
});
This appears to be true for IE11 as well. Is this just an implementation coincidence or is there an officially defined order event listeners for each event type will be triggered in? Can I rely on mousedown always coming before focusin or focusout?
