Window: blur イベント

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

blur の反対は focus です。

バブリング なし
キャンセル 不可
インターフェイス FocusEvent
イベントハンドラープロパティ onblur
同期 / 非同期 同期
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
blur eventChrome 完全対応 5Edge 完全対応 12Firefox 完全対応 あり
完全対応 あり
未対応 ? — 24
補足
補足 The interface for this event is Event, not FocusEvent.
IE 完全対応 ありOpera 完全対応 12.1Safari 完全対応 5.1WebView Android 完全対応 ありChrome Android 完全対応 18Firefox Android 完全対応 ありOpera Android 完全対応 12.1Safari iOS 完全対応 5.1Samsung Internet Android 完全対応 1.0

凡例

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

このイベントが処理されている間の Document.activeElement の値はブラウザーによって異なります (バグ 452307)。 IE10 はフォーカスが移動する先の要素を設定しますが、 Firefox および Chrome はふつう、文書の body を設定します。

関連情報

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