Element: focusin イベント
focusin
イベントは、要素がフォーカスを受け取ろうとしているときに発生します。このイベントと focus
との主な違いは、 focusin
がバブリングを行うのに対し focus
は行わないことです。
focusin
の反対は focusout
です。
バブリング | あり |
---|---|
キャンセル | 不可 |
インターフェイス | FocusEvent |
イベントハンドラープロパティ | onfocusin |
同期 / 非同期 | 同期 |
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-focusin |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 関連イベント:
blur
,focus
,focusout
- Focusing: focus/blur