Window: focus イベント
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
focus イベントは、要素がフォーカスを受け取ったときに発生します。
focus の反対は blur です。
このイベントはキャンセル不可で、バブリングしません。
構文
このイベント名を addEventListener() のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
js
addEventListener("focus", (event) => { })
onfocus = (event) => { }
イベント型
FocusEvent です。UIEvent および Event を継承しています。
イベントプロパティ
このインターフェイスは親である UIEvent から、そして間接的に Event から継承したプロパティもあります。
-
このイベントのセカンダリーターゲットを
EventTargetで表します。場合によっては（ページへの移動やページからの移動時など）、セキュリティ上の理由から、このプロパティがnullに設定されることがあります。
例
ライブデモ
この例ではフォーカスを失ったときに文書の外見を変更します。 addEventListener() を使用して focus および blur イベントを監視します。
HTML
html
<p id="log">この文書をクリックして、アクティブにしてください。</p>
CSS
css
.paused {
background: #dddddd;
color: #555555;
}
JavaScript
js
const log = document.getElementById("log");
function pause() {
document.body.classList.add("paused");
log.textContent = "フォーカスが失われました!";
}
function play() {
document.body.classList.remove("paused");
log.textContent =
"この文書にフォーカスがあります。文書の外をクリックするとフォーカスが失われます。";
}
window.addEventListener("blur", pause);
window.addEventListener("focus", play);
結果
仕様書
| 仕様書 |
|---|
| UI Events # event-type-focus |
| HTML # handler-onfocus |