聚焦并单击javascript中的事件执行顺序

我在文本框上定义了一个

focusout

事件处理程序，在按钮上定义了一个

click

处理程序。如果我将焦点放在文本输入中，然后直接单击按钮，那么这两个事件都会触发，正如预期的那样。focusout事件首先被触发，如果开发人员工具栏打开，则单击被触发，否则它将以相反的方式触发

这背后的真正原因是什么

以下是提问者的片段，但我相信问题本身已经足够清楚了：

document.getElementById（'myInput'）.addEventListener（'blur'，function（）{alert（“Input Focused Out”）；}）；
document.getElementById（'myButton'）.addEventListener（'click'，function（）{alert（“Button Clicked”）；}）

按钮
我认为，当您比较单击事件和模糊事件的顺序时，模糊应该总是在单击事件之前触发，而不考虑调试工具。
单击的原因涉及mousedown+mouseup。这意味着，在释放鼠标按钮之前，不会触发单击事件

我在小提琴上进行了测试，发现如果我们发现这样的情况，我们应该使用mousedown事件而不是click事件。
当我进行更多测试时，我发现mousedown的顺序总是在模糊事件之前，所以在这种情况下，mousedown将首先触发，然后模糊事件将触发

小提琴：

JS:

HTML:


按钮
“反之亦然”的确切含义是什么？您能否提供一个小演示，说明您的实际情况？
document.getElementById('myInput').addEventListener('blur', function(){
document.getElementById("myDiv").innerHTML = document.getElementById("myDiv").innerHTML + "blur"; 
});
        document.getElementById('myButton').addEventListener('mousedown', function(){
document.getElementById("myDiv").innerHTML = document.getElementById("myDiv").innerHTML + "mousedown";
});

 document.getElementById('myButton').addEventListener('click', function(){
document.getElementById("myDiv").innerHTML = document.getElementById("myDiv").innerHTML + "click";
});

<input id="myInput" name="myInput" type="text" />
<button id="myButton" name="myButton" >Button</button>


<div id="myDiv">
</div>