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 完全対応 ありEdge 完全対応 ありFirefox 完全対応 52IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 52Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報