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 廃止 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報