Element: focusout イベント

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

focusout の反対は focusin です。

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

ライブデモ

HTML

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

JavaScript

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

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

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

結果

仕様書

仕様書 状態 備考
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
focusout eventChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 52IE 完全対応 9Opera 完全対応 11.6Safari 完全対応 5WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 52Opera Android 完全対応 12.1Safari iOS 完全対応 4.2Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報