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