ready(document) : 문서 객체 요소(DOM 요소)가 로드 되었을 때 발생 문서 객체 요소가 자바스크립트에서 사용 가능한 상태인지 확인하고 작동이 가능한 안전 상태일 때 발생
resize : 윈도우 창 크기 변경 시 발생
scroll : 윈도우 창 스크롤 이동 시 발생
load : 문서 객체 요소가 모두 로드 되었을 때 발생. ready와 차이점은 리소스, 이미지 또는 음악 등 로드가 완료된 경우
unload : 문서 객체를 닫을 때 발생
$(document).ready()
document의 DOM 객체가 로드되고, 브라우저가 DOM 트리를 생성한 직후 외부 리소스, 이미지 등의로드 여부 상고나 없이 실행
$(window).load()
HTML 문서 뿐 아니라 모든 외부 리소스(css, js), 이미지 등이 웹 브라우저 메모리에 모두 올려지면(로드되면) 실행
이벤드 발생 순서
$(document).ready()가 먼저
$(window).load()가 뒤에 발생
이벤트 시점에 따라 오작동 발생 가능성 있기 때문에 같이 사용하지 않고 분리해서 사용
윈도우 이벤트 예제
windowResize.html
resize() 이벤트
윈도우 크기 알아와서 <h3> 태그에 출력하고 윈도우 크기에 따라 배경색 변경
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>JavaScript</title><scriptsrc="jquery-3.6.0.min.js"></script><scripttype="text/javascript">
$(document).ready(function(){
// 윈도우 크기가 변경될 때 resize 이벤트 발생
$(window).resize(function() {
// 윈도우 크기 알아와서var winWidth = $(window).width();
var winHeight = $(window).height();
// <h3> 태그에 크기 출력
$('h3').text("윈도우 크기 : " + winWidth + " x " + winHeight);
// 크기에 따라 배경색 변경 : 변수에 색상 값 저장var bgColor;
if(winWidth >= 900) bgColor = "green";
elseif(winWidth >= 700) bgColor = "yellow";
else bgColor = "red";
// 변수에 저장된 값에 따라 문서 배경색 변경
$('body').css('background', bgColor);
});
});
</script></head><body><h3>윈도우 크기 : 윈도우 크기를 변경해보세요.</h3></body></html>
imageResize.html
윈도우 크기에 맞춰 이미지 크기 변경 (가로-세로 비율 유지하면서 변경)
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>JavaScript</title><scriptsrc="jquery-3.6.0.min.js"></script><styletype="text/css">
* {margin: 0;}
img {width: 100%;}
</style><scripttype="text/javascript">
$(document).ready(function(){
// 윈도우 크기 변경될 때 윈도우 크기에 이미지 크기 맞추기
$(window).on('resize', function(){
// 윈도우 가로 길이 알아와서 변수에 저장var winWidth = $(window).width();
// 이미지 가로 x 세로 비율에 맞춰서 높이 구하기var imgHeight = winWidth * 600 / 1920;
// 이미지의 가로, 세로 길이 설정
$('#topImg').css({'width':winWidth, 'height':imgHeight});
});
});
</script></head><body><divid="topImgBox"><imgsrc="image/topImg.jpg"id="topImg"></div></body></html>