如何解决为什么 body.onfocus 触发而不是 body.addEventListener('focus')? TL;DR:问题
为什么 <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
会捕获它。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。