Window: focus event

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 廃止された 初回定義

ブラウザーの対応

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!
機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本対応 (有) (有) (有) (有) (有) (有)
機能 Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本対応 ? ? (有) ? ? ? ?

Firefox 24 以前では、インターフェイスは Event でした。 (バグ 855741)

関連情報

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

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,