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 = '';
});
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
UI Events | 草案 | Added info that this event is composed. |
Document Object Model (DOM) Level 3 Events Specification | 廃止 | 初回定義 |
ブラウザーの対応
BCD tables only load in the browser