Window: focus イベント

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

focus の反対は blur です。

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

ライブデモ

この例ではフォーカスを失ったときに文書の外見を変更します。 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. Click outside the document to lose focus.';
}

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

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

結果

仕様書

仕様書 状態 備考
UI Events 草案 Added info that this event is composed.
Document Object Model (DOM) Level 3 Events Specification 廃止された 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
focus eventChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 あり
完全対応 あり
未対応 ? — 24
補足
補足 The interface for this event is Event, not FocusEvent.
IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

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