Window: focus event

当元素获得焦点时， focus 事件就会触发。

与 focus 相反的事件是 blur

示例

在线示例

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

html 

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

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

JavaScript


js
function pause() {
  document.body.classList.add('paused');
  log.textContent = 'FOCUS LOST!';
function play() {
  document.body.classList.remove('paused');
  log.textContent = 'This document has focus. Click outside the document to lose focus.';
const log = document.getElementById('log');
window.addEventListener('blur', pause);