[책] 자바스크립트 코드 레시피 278 - 95일차

포커스 확인하기

• 페이지의 포커스 유무를 확인하고 싶을 때
• 페이지의 포커스가 맞춰져 있을 때만 음악을 재생하고 싶을 때

구문

addEventListener('focus', () => {}); // 포커스가 맞춰져 있을 때
addEventListener('blur', () => {}); // 포커스를 벗어나 있을 때

설명

해당 페이지의 포커스 상태 여부는 이벤트를 통해 확인할 수 있습니다. focus 이벤트는 포커스가 맞춰졌을 때 발생하는 이벤트이며, blur 는 그 반대의 이벤트입니다. 예를 들어 웹에서 BGM을 재생하고 싶을 때는 focus와 blur를 사용하여 재생과 정지를 할 수 있습니다.

실습

페이지에서 다른 창으로 갈 때 실행됩니다.

index.html

<p class="desc"></p>

---

style.css

.desc {
  font-size: 24px;
  font-weight: 700;
}

---

script.js

window.onload = () => {
  window.addEventListener('focus', () => {
    document.querySelector('.desc').innerHTML = '포커스 상태';
  });
  window.addEventListener('blur', () => {
    document.querySelector('.desc').innerHTML = '포커스를 벗어난 상태';
  });
};