この翻訳は不完全です。英語から この記事を翻訳 してください。

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

一般的な情報

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

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

プロパティ

プロパティ 説明
target 読取専用 EventTarget イベントターゲット (DOM ツリー内最上位の対象)
type 読取専用 DOMString イベントの型
bubbles 読取専用 Boolean 通常時のバブリングの有無
cancelable 読取専用 Boolean イベントのキャンセルの可否
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);

ブラウザ互換性

  
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)。

関連イベント

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

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