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

ブラウザーの対応

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

[1] Gecko 24 (Firefox 24 / Thunderbird 24 / SeaMonkey 2.21) 以前は、このイベントは FocusEvent ではなく Event でした。 (バグ 855741) を参照してください。

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

関連情報

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

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

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