JavaScript首次触发focus/blur事件未捕获问题及原因排查

问题场景 #

我之前碰到一个诡异的问题：通过下面的代码给window绑定的focus和blur事件，第一次该触发的时候完全没被捕获，只有后续操作才会正常响应：

document.addEventListener("DOMContentLoaded", function() {
  window.addEventListener("focus", function () { 
    // 自定义业务逻辑
  }); 
  window.addEventListener("blur", function () { 
    // 自定义业务逻辑
  }); 
})

我还尝试过手动调用window.blur();和window.focus()来强制触发事件，但都没有效果。

问题根因与解决 #

后来终于找到问题所在：页面加载时浏览器的控制台处于打开状态。虽然具体的底层触发逻辑细节还没完全搞清楚，但只要关闭控制台后重新加载页面，首次触发focus/blur事件就完全正常工作了。

内容的提问来源于stack exchange，提问作者Florian M