Element: focusout イベント
focusout
イベントは、要素がフォーカスを失おうとしているときに発生します。このイベントと blur
との主な違いは、 focusout
がバブリングするのに対し blur
はしないことです。
focusout
の反対は focusin
です。
バブリング | あり |
---|---|
キャンセル | 不可 |
インターフェイス | FocusEvent |
イベントハンドラープロパティ | onfocusout |
同期 / 非同期 | 同期 |
Composed | はい |
例
ライブデモ
HTML
<form id="form">
<input type="text" placeholder="text input">
<input type="password" placeholder="password">
</form>
JavaScript
const form = document.getElementById('form');
form.addEventListener('focusin', (event) => {
event.target.style.background = 'pink';
});
form.addEventListener('focusout', (event) => {
event.target.style.background = '';
});
結果
仕様書
Specification |
---|
UI Events # event-type-focusout |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 関連イベント:
blur
,focus
,focusin
- Focusing: focus/blur