blur イベントは要素がフォーカスを失ったときに発生します。 focusout と違い、親の要素にはイベントが伝達されません。

一般的な情報

定義
DOM L3
インターフェース
FocusEvent
バブリング
No
キャンセル可能
No
対象
Element
標準の動作
無し。

註: Document.activeElement値はブラウザによって挙動が異なります (バグ 452307)、IE10は移動先の要素を示しますが、FirefoxとChromeでは主に body を示します。

プロパティ

Property Type Description
target 読取専用 EventTarget Event target (DOM element)
type 読取専用 DOMString The type of event.
bubbles 読取専用 Boolean Whether the event normally bubbles or not.
cancelable 読取専用 Boolean Whether the event is cancellable or not.
relatedTarget 読取専用 EventTarget (DOM element) null

イベントの委譲

focusout イベントを使う方法や、 addEventListener の "useCapture" を true にする方法があります。

HTML Content

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

JavaScript Content

var form = document.getElementById("form");
form.addEventListener("focus", function( event ) {
  event.target.style.background = "pink";    
}, true);
form.addEventListener("blur", function( event ) {
  event.target.style.background = "";    
}, true);

ブラウザ互換性

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!
  
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 5 (有) (有)[1] 6 12.1 5.1
  
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 4.0 53 (有) ? 10.0 12.1 5.1

[1] Gecko 24 (Firefox 24 / Thunderbird 24 / SeaMonkey 2.21) 以前では FocusEventではなく Event でした (バグ 855741)。

関連イベント

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, fscholz, TNKSoftware
最終更新者: mfuji09,