Window: blur イベント

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

blur の反対は focus です。

バブリング なし
キャンセル 不可
インターフェイス FocusEvent
イベントハンドラープロパティ onblur
同期 / 非同期 同期
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-blur
HTML Standard
# handler-onblur

ブラウザーの互換性

BCD tables only load in the browser

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

関連情報

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