JQuery 윈도우 이벤트 정리

jQuery에서 window 객체와 관련된 이벤트는 주로 브라우저 창의 상태 변화나 사용자 상호작용을 감지하는 데 사용됩니다. 이러한 이벤트들은 $(window)를 대상으로 바인딩하며, 페이지 로드, 크기 변경, 스크롤 등을 효율적으로 처리할 수 있습니다.

주요 이벤트 목록

jQuery window 이벤트는 다음과 같습니다. 각 이벤트는 $(window).on('eventName', function(){}) 형태로 사용하거나 단축 메서드(예: .load())로 호출할 수 있습니다.

이벤트 이름설명예시 사용법

이벤트 이름설명예시 사용법

 

load	모든 리소스(이미지, CSS 등)가 로드 완료 시 발생. 페이지 전체 로딩 후 실행.	$(window).on('load', function(){ console.log('로드 완료'); }); ​
resize	창 크기가 변경될 때 발생. 반응형 디자인에 유용.	$(window).on('resize', function(){ console.log('크기 변경'); });
scroll	스크롤바 이동 시 발생. 무한 스크롤 등에 활용.	$(window).on('scroll', function(){ console.log('스크롤 중'); });
unload	페이지가 언로드(닫힘)될 때 발생. 정리 작업에 사용.	$(window).on('unload', function(){ /* 저장 */ }); ​
error	로딩 중 에러 발생 시. 이미지 등 실패 처리.	$(window).on('error', function(){ console.log('에러'); }); ​
ready	document 준비 완료(DOM 로드). window가 아닌 document에서 주로 사용되지만 window와 연계.	$(document).ready(function(){});

 

 

 

바인딩 방법

이벤트는 .on() 메서드로 여러 개를 한 번에 연결할 수 있습니다. 예: $(window).on('resize scroll', function(){}); 이는 성능 최적화에 좋습니다.

기본 단축 메서드도 지원: .resize(), .scroll() 등으로 간단히 사용하세요. 이벤트 핸들러 내에서 $(this)를 사용해 window 객체에 접근할 수 있습니다.​

실전 예제

스크롤 이벤트로 헤더를 숨기는 코드:

 

text

$(window).scroll(function(){ if ($(this).scrollTop() > 100) { $('header').fadeOut(); } });

이처럼 window 이벤트는 모바일/데스크톱 반응형 UI에 필수적입니다.​