We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

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

ブラウザ互換性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

関連イベント

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

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