时间戳

首页 > 解决方案 > document.activeElement 何时以及如何在焦点事件中设置？

javascript - document.activeElement 何时以及如何在焦点事件中设置？

问题描述

我对document.activeElement焦点事件期间的价值感到困惑。考虑以下示例：

/*
 * 1. Click on button to focus it
 * 2. Press TAB
 */

const div = document.querySelector('div')
const add = div.addEventListener.bind(div)

add('keydown', () => console.log('Key down', document.activeElement), false)
add('keyup', () => console.log('Key up', document.activeElement), false)
add('focusout', () => console.log('Focus out', document.activeElement), false)
add('focusout', () => requestAnimationFrame(() => console.log('rAF Focus out', document.activeElement)), false)
<div>
  <button>Click</button>
  <input>
</div>

这导致：

Key down <button>Click</button>
Focus out <body>…&lt;/body>
rAF Focus out <input></input>
Key up <input></input>

具体来说，我想知道为什么document.activeElement设置为bodyin focusout？

标签： javascriptdomdom-events

解决方案

推荐阅读