Windowのfocus/blur
バイブコーディングをしていた際に、「ブラウザを切り替えたら再レンダリング」される現象があり、その事象を何と言うのか分からなかった。
調べると、「window.focus/blur」で通じるようだったので備忘録。
window.focus/blur
window.focus / window.blur は メソッド と イベント の両方が存在する。
タブ切り替え検知で使うのは イベントのほう。
window.focus イベント
ブラウザのタブやウィンドウにユーザーが戻ってきたときに発火。
window.blur イベント
ユーザーがタブやウィンドウを離れたりときに発火。
サンプルコード
window.addEventListener("focus", () => {
console.log("タブに戻ってきた！");
});
window.addEventListener("blur", () => {
console.log("タブから離れた！");
});
📌 使いどころ
- チャットアプリ：タブがアクティブなときだけ「既読」にする
- ゲーム：ユーザーがタブを離れたら自動でポーズする
- 省リソース：タブが非アクティブのときはアニメーションやポーリングを止める
まとめ
window の focus / blur は 「ページ全体が見られているかどうか」 を判定するためのイベント。