자바스크립트 윈도우 이벤트 정리

자바스크립트의 window 객체는 브라우저 창과 관련된 다양한 이벤트를 제공합니다. 이 이벤트들은 페이지 로드, 크기 변경, 스크롤 등 창 상태 변화를 감지할 때 사용되며, 주로 addEventListener()로 등록합니다.

주요 Window 이벤트 목록

Window 객체에서 청취할 수 있는 핵심 이벤트는 다음과 같습니다.

 

이벤트 이름설명

load	페이지와 모든 리소스(이미지, 스타일시트 등)가 완전히 로드될 때 발생
resize	창 크기가 변경될 때 발생
scroll	창이나 문서가 스크롤될 때 발생​
unload	페이지가 언로드될 때 발생​
beforeunload	페이지가 언로드되기 직전 발생​
blur	창이 포커스를 잃을 때 ​
focus	창이 포커스를 얻을 때 ​
online	네트워크 연결이 복구될 때 ​
offline	네트워크 연결이 끊길 때​
storage	localStorage나 sessionStorage가 변경될 때 ​

이 외에도 orientationchange(기기 회전), hashchange(URL 해시 변경), pagehide(페이지 숨김) 등이 있습니다.​

이벤트 등록 방법

window 이벤트는 addEventListener()나 속성(onload 등)으로 등록합니다.

• addEventListener(): 여러 핸들러 등록 가능, 권장 방식.
• 속성 방식: window.onresize = function() { ... }.

샘플 코드 예제

1. 페이지 로드 이벤트 (load)

 

javascript

window.addEventListener('load', function() { console.log('페이지가 완전히 로드되었습니다.'); // 초기화 작업 수행 });

이 이벤트는 DOMContentLoaded보다 늦게 발생하며 모든 리소스 로드를 기다립니다.

2. 창 크기 변경 (resize)

 

javascript

function updateSize() { console.log(`창 크기: ${window.innerWidth} x ${window.innerHeight}`); } window.addEventListener('resize', updateSize);

빈번한 호출을 피하려면 throttle 적용을 고려하세요.

3. 스크롤 이벤트 (scroll)

 

javascript

window.addEventListener('scroll', function() { const scrollY = window.scrollY; console.log(`스크롤 위치: ${scrollY}px`); if (scrollY > 100) { document.body.style.background = 'lightgray'; // 예시 효과 } });

성능을 위해 debounce/throttle 사용 권장.​

4. 포커스/블러 (focus/blur)

 

javascript

window.addEventListener('focus', () => console.log('창 포커스')); window.addEventListener('blur', () => console.log('창 블러'));

탭 전환 시 유용합니다.​

이 이벤트들은 브라우저 호환성이 높아 대부분 지원되며, 모바일에서도 잘 작동합니다.​