[Edge]。→、
要素がフォーカスを失ったときに発生します。このイベントと focusout との違いは、focusout がバブリングするのに対し、blur はしないことです。
blur の反対は focus です。
| バブリング | なし |
|---|---|
| キャンセル | 不可 |
| インターフェイス | FocusEvent |
| イベント ハンドラー プロパティ | 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 = '';
});
HTML：
<SPAN id=IdTest>SPAN要素</SPAN><BR> <SPAN id=IdTest2 contenteditable>SPAN要素：contenteditable</SPAN><BR> <INPUT id=IdTest3 value="INPUT要素">
JavaScript：
function Job(eve){ //focusイベント処理：
D=eve; //＝[object]：[object FocusEvent]
//isTrusted＝[boolean]：true
//relatedTarget＝[object]：[object HTMLButtonElement]
//view＝[object]：[object Window]
//detail＝[number]：0
//sourceCapabilities＝[object]：[object InputDeviceCapabilities]
//which＝[number]：0
//initUIEvent＝[function]：function initUIEvent() { [native code] }
//type＝[string]：focus
//target＝[object]：[object HTMLSpanElement]
//currentTarget＝[object]：null
//eventPhase＝[number]：0
//bubbles＝[boolean]：false
//cancelable＝[boolean]：false
//defaultPrevented＝[boolean]：false
//composed＝[boolean]：true
//…
let E=eve.target;
E.style.backgroundColor="#fee";
}
function Job2(eve){ //blurイベント処理：
DA=eve; //＝[object]：[object FocusEvent]
//isTrusted＝[boolean]：true
//relatedTarget＝[object]：[object HTMLButtonElement]
//view＝[object]：[object Window]
//detail＝[number]：0
//sourceCapabilities＝[object]：[object InputDeviceCapabilities]
//which＝[number]：0
//initUIEvent＝[function]：function initUIEvent() { [native code] }
//type＝[string]：blur
//target＝[object]：[object HTMLSpanElement]
//currentTarget＝[object]：null
//eventPhase＝[number]：0
//bubbles＝[boolean]：false
//cancelable＝[boolean]：false
//defaultPrevented＝[boolean]：false
//composed＝[boolean]：true
//…
let E=eve.target;
E.style.backgroundColor="";
}
IdTest.onfocus=Job;
IdTest2.onfocus=Job;
IdTest3.onfocus=Job;
IdTest.onblur=Job2;
IdTest2.onblur=Job2;
IdTest3.onblur=Job2;