EventTarget事件：focus

EventTarget事件 - focus

当元素获得焦点时，focus事件将触发。这个事件和focusin之间的主要区别在于只有后者冒泡。

注意：与focus相反的是blur。

基本信息

属性

示例

事件授权

有两种方法可以为此事件实现事件授权：通过使用focusin事件或将addEventListener()的useCapture参数设置为true。

请参阅blur参考页面上此示例的代码。

Window focus

此示例在失去焦点时更改文档的外观。它使用addEventListener()来监视focus和blur事件。

HTML

<p id="log">Click on this document to give it focus.</p>

CSS

.paused {
  background: #ddd;
  color: #555;
}

JavaScript的

function pause() {
  document.body.classList.add('paused');
  log.textContent = 'FOCUS LOST!';
}

function play() {
  document.body.classList.remove('paused');
  log.textContent = 'This document has focus.';
}

const log = document.getElementById('log');

window.addEventListener('blur', pause);
window.addEventListener('focus', play);

规范

浏览器兼容性Section

我们将兼容性数据转换为机器可读的JSON格式。

• 电脑端

• 移动端
  

在Firefox 24之前该接口是Event。