问题描述
为什么 <body> 元素的 focus 和 blur 事件仅通过 .on<...> 属性方法而不是通过添加了 addEventListener 的回调触发？
下面的简单例子可以复制到控制台运行：
const method = name => () => console.log(name);
document.body.addEventListener('blur',method('listener blur'));
document.body.addEventListener('focus',method('listener focus'));
document.body.onfocus = method('onfocus');
document.body.onblur = method('onblur');
切换到不同的标签会导致正文模糊，然后切换回焦点。
但只有 onfocus 和 onblur 为我登录，而从不listener focus 或 listener blur。
现代 Chrome 和 Firefox 都是这种情况；因此我认为这是有原因的？
解决方法
TL;DR：
使用 window.addEventListener 或 document.addEventListener，但*从不document.body.addEventListener。
问题
问题是，<body> 没有 focus 或 blur 事件； document 确实如此。然而，可能是为了与非常旧的网站兼容，<body> 元素允许在文档上出现焦点/模糊时触发 onfocus 和 onblur。
因此，在大多数情况下使用 window.addEventListener 应该可以工作，因为事件冒泡从 document 到 window。并且由于所有其他事件也从主体中冒泡，因此最好也将 window.addEventListener 用于其他事件（*除非有特定原因不这样做，例如传播停止时）.
这个问题也是 apparently the case for the scroll event，因为 <html> 标签可能实际上是滚动。同样，当它冒泡时，使用 window.addEventListener 会捕获它。