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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
blur eventChrome 完全対応 5Edge 完全対応 ありFirefox 完全対応 あり
完全対応 あり
未対応 ? — 24
補足
補足 The interface for this event is Event, not FocusEvent.
IE 完全対応 ありOpera 完全対応 12.1Safari 完全対応 5.1WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 12.1Safari iOS 完全対応 5.1Samsung Internet Android 完全対応 あり

凡例

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

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

関連情報

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

このページの貢献者: mfuji09, mdnwebdocs-bot, fscholz, TNKSoftware
最終更新者: mfuji09,