focus イベントは、要素がフォーカスを受け取ったときに発生します。このイベントと focusin との違いは、 focusin がバブリングを行うのに対し focus は行わないことです。
focus の反対は blur です。
| バブリング | なし |
|---|---|
| キャンセル可能 | いいえ |
| インターフェイス | FocusEvent |
| イベントハンドラープロパティ | onfocus |
| 同期 / 非同期 | 同期 |
| 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 | 廃止された | 初回定義 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
focus event | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox
完全対応
あり
| IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応
- 実装ノートを参照してください。
- 実装ノートを参照してください。