为什么 body.onfocus 触发而不是 body.addEventListener('focus')？

Question

为什么<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 都是这种情况； 因此我认为这是有原因的？

Answer 1

TL;博士：

使用window.addEventListener或document.addEventListener ，但 *never document.body.addEventListener 。

问题

问题是， <body>没有focus或blur事件； document确实如此。 然而，可能是为了与非常旧的网站兼容， <body>元素允许在文档上发生焦点/模糊时触发onfocus和onblur 。

因此，使用window.addEventListener应该在大多数情况下工作，因为事件气泡从document到window 。 而且由于所有其他事件也会从主体中冒泡，因此最好也将window.addEventListener用于其他事件（*除非有特定原因不这样做，例如停止传播时） 。

这个问题显然也适用于滚动事件，因为<html>标记可能是实际滚动的内容。 同样，使用window.addEventListener会在它冒泡时捕获它。