Front/jQuery
jQuery - 이벤트(윈도우 이벤트)
by Hyeon_
2021. 12. 14.
이벤트 유형
- 윈도우 이벤트
- 입력 양식 이벤트
- 마우스 이벤트
- 키보드 이벤트
윈도우 이벤트
윈도우 이벤트 종류
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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script src="jquery-3.6.0.min.js"></script>
<script type="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";
else if(winWidth >= 700) bgColor = "yellow";
else bgColor = "red";
// 변수에 저장된 값에 따라 문서 배경색 변경
$('body').css('background', bgColor);
});
});
</script>
</head>
<body>
<h3>윈도우 크기 : 윈도우 크기를 변경해보세요.</h3>
</body>
</html>
imageResize.html
- 윈도우 크기에 맞춰 이미지 크기 변경 (가로-세로 비율 유지하면서 변경)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script src="jquery-3.6.0.min.js"></script>
<style type="text/css">
* {margin: 0;}
img {width: 100%;}
</style>
<script type="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>
<div id="topImgBox">
<img src="image/topImg.jpg" id="topImg">
</div>
</body>
</html>