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

탭 화면 이벤트 처리하기

• 브라우저 탭 비활성화(백그라운드화)시 시스템에 부하를 주는 작업을 멈추고 싶을 때
• 스마트폰 슬립 모드에서 브라우저 복귀 시점의 작업을 처리하고 싶을 때

구문

visibilitychange 브라우저의 탭 상태가 변경되는 시점

설명

visibilitychange 이벤트는 브라우저 탭의 콘텐츠가 표시/비표시(백그라운드화) 변경이 일어날 때 발생합니다. document 요소에 이벤트를 설정합니다. 요소 표시 상태를 나타내는 document.visibilityState를 함께 사용해 상태에 따른 처리를 분류할 수 있습니다.

실습

document.addEventListener('.visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    console.log('콘텐츠 표시 상태');
    return;
  }
  if (document.visibilityState === 'hidden') {
    console.log('콘텐츠 비활성화(백그라운드화) 상태)');
  }
});