Window: focus イベント

focus イベントは、要素がフォーカスを受け取ったときに発生します。

focus の反対は blur です。

バブリング なし
キャンセル 不可
インターフェイス FocusEvent
イベントハンドラープロパティ onfocus
同期 / 非同期 同期
Composed はい

例

ライブデモ

この例ではフォーカスを失ったときに文書の外見を変更します。 addEventListener() を使用して focus および blur イベントを監視します。

HTML

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

CSS

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);
window.addEventListener("focus", play);

結果

仕様書

Specification
UI Events
# event-type-focus
HTML Standard
# handler-onfocus

ブラウザーの互換性

BCD tables only load in the browser

関連情報

  • 関連イベント: blur
  • Element を対象としたこのイベント: focus イベント