Element: focusout イベント

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

focusout の反対は focusin であり、こちらは要素がフォーカスを受け取ったときに発生します。

focusout イベントはキャンセル不可です。

構文

このイベント名を addEventListener() 等のメソッドで使用してください。

js
addEventListener("focusout", (event) => {});

イベント型

FocusEvent です。 Event を継承しています。

Event UIEvent FocusEvent

イベントプロパティ

親である UIEvent および間接的に Event から継承したプロパティもあります。

FocusEvent.relatedTarget

もしあれば、フォーカスを受け取った要素。

例

ライブデモ

HTML

html
<form id="form">
  <label>
    テキストを入力:
    <input type="text" placeholder="テキストを入力" />
  </label>
  <label>
    パスワード:
    <input type="password" placeholder="password" />
  </label>
</form>

JavaScript

js
const form = document.getElementById("form");

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

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

結果

仕様書

Specification
UI Events
# event-type-focusout

メモ: UI Events 仕様書ではフォーカスイベントの順序を記述していますが、現在のブラウザーの実装とは異なります。

ブラウザーの互換性

BCD tables only load in the browser

関連情報