blur
イベントは、要素がフォーカスを失ったときに発生します。このイベントと 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 = '';
});
結果
イベント委譲
このイベントのイベント委譲を実装する方法は二つあります。 focusout
イベントを使用するか、 addEventListener()
の useCapture
引数に true
を設定するかです。
HTML
<form id="form">
<input type="text" placeholder="text input">
<input type="password" placeholder="password">
</form>
JavaScript
const form = document.getElementById('form');
form.addEventListener('focus', (event) => {
event.target.style.background = 'pink';
}, true);
form.addEventListener('blur', (event) => {
event.target.style.background = '';
}, true);
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
UI Events | 草案 | Added info that this event is composed. |
Document Object Model (DOM) Level 3 Events Specification | 廃止された | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
このイベントが処理されている間、 Document.activeElement
の値はブラウザーによって異なります (バグ 452307)。 IE10 はフォーカスが移動する先の要素を設定しますが、 Firefox および Chrome はふつう、文書の body
を設定します。