Window: blur イベント
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
blur イベントは、要素がフォーカスを失ったときに発生します。
blur の反対は focus です。
このイベントはキャンセル不可で、バブリングしません。
構文
このイベント名を addEventListener() のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
js
addEventListener("blur", (event) => { })
onblur = (event) => { }
イベント型
FocusEvent です。UIEvent および Event を継承しています。
イベントプロパティ
このインターフェイスは親である UIEvent から、そして間接的に Event から継承したプロパティもあります。
-
このイベントのセカンダリーターゲットを
EventTargetで表します。場合によっては（ページへの移動やページからの移動時など）、セキュリティ上の理由から、このプロパティがnullに設定されることがあります。
例
ライブデモ
この例ではフォーカスを失ったときに文書の外見を変更します。 addEventListener() を使用して focus および blur イベントを監視します。
HTML
html
<p id="log">この文書をクリックして、アクティブにしてください。</p>
CSS
css
.paused {
background: #dddddd;
color: #555555;
}
JavaScript
js
const log = document.getElementById("log");
function pause() {
document.body.classList.add("paused");
log.textContent = "フォーカスが失われました!";
}
function play() {
document.body.classList.remove("paused");
log.textContent =
"この文書にフォーカスがあります。文書の外をクリックするとフォーカスが失われます。";
}
window.addEventListener("blur", pause);
window.addEventListener("focus", play);
結果
仕様書
| Specification |
|---|
| UI Events # event-type-blur |
| HTML # handler-onblur |
ブラウザーの互換性
このイベントが処理されている間、 Document.activeElement の値はブラウザーによって異なります (Firefox バグ 452307)。 IE10 はフォーカスが移動する先の要素を設定しますが、 Firefox と Chrome ではふつう、文書の body を設定します。