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);
結果
仕様書
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
を設定します。