--- title: 'Element: blur イベント' slug: Web/API/Element/blur_event tags: - API - DOM - Element - Event - FocusEvent - Reference - blur - onblur - イベント translation_of: Web/API/Element/blur_event ---
{{APIRef}}

blur イベントは、要素がフォーカスを失ったときに発生します。このイベントと {{domxref("Element/focusout_event", "focusout")}} との違いは、 focusout がバブリングを行うのに対し blur は行わないことです。

blur の反対は {{domxref("Element/focus_event", "focus")}} です。

バブリング なし
キャンセル 不可
インターフェイス {{DOMxRef("FocusEvent")}}
イベントハンドラープロパティ {{domxref("GlobalEventHandlers/onblur", "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 = '';
});

結果

{{EmbedLiveSample("Simple_example", '100%', '50px')}}

イベント委譲

このイベントのイベント委譲を実装する方法は二つあります。 {{Event("focusout")}} イベントを使用するか、 {{domxref("EventTarget.addEventListener()", "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);

結果

{{EmbedLiveSample("Event_delegation", '100%', '50px')}}

仕様書

仕様書 状態 備考
{{SpecName("UI Events", "#event-type-blur")}} {{Spec2("UI Events")}} Added info that this event is composed.
{{SpecName("DOM3 Events", "#event-type-blur")}} {{Spec2("DOM3 Events")}} 初回定義

ブラウザーの互換性

{{Compat("api.Element.blur_event")}}

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

関連情報