Element: blur イベント

blur イベントは、要素がフォーカスを失ったときに発生します。このイベントと focusout との違いは、 focusout がバブリングを行うのに対し blur は行わないことです。

blur の反対は focus です。

バブリング なし
キャンセル 不可
インターフェイス FocusEvent
イベントハンドラープロパティ onblur
同期 / 非同期 同期
Composed はい

例

簡単な例

HTML

<form id="form">
  <input type="text" placeholder="text input">
  <input type="password" placeholder="password">
</form>

JavaScript

const password = document.querySelector('input[type="password"]');

password.addEventListener('focus', (event) => {
  event.target.style.background = 'pink';    
});

password.addEventListener('blur', (event) => {
  event.target.style.background = '';    
});

結果

イベント委譲

このイベントのイベント委譲を実装する方法は二つあります。 focusout イベントを使用するか、 addEventListener() の useCapture 引数に true を設定するかです。

HTML

<form id="form">
  <input type="text" placeholder="text input">
  <input type="password" placeholder="password">
</form>

JavaScript

const form = document.getElementById('form');

form.addEventListener('focus', (event) => {
  event.target.style.background = 'pink';    
}, true);

form.addEventListener('blur', (event) => {
  event.target.style.background = '';    
}, true);

結果

仕様書

仕様書 状態 備考
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 完全対応 1Edge 完全対応 12Firefox 完全対応 24
完全対応 24
未対応 6 — 24
補足
補足 The interface for this event is Event, not FocusEvent.
IE 完全対応 9Opera 完全対応 11.6Safari 完全対応 3.1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 24
完全対応 24
未対応 6 — 24
補足
補足 The interface for this event is Event, not FocusEvent.
Opera Android 完全対応 12.1Safari iOS 完全対応 2Samsung Internet Android 完全対応 1.0

凡例

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

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

関連情報