JavaScript의 창 크기 조정 이벤트
이 자습서에서는 JavaScript에서addEventListener()및onresize()함수를 사용하여 크기 조정 이벤트를 추가하는 방법에 대해 설명합니다.
JavaScript에서addEventListener()함수를 사용하여 크기 조정 이벤트 추가
창에 크기 조정 이벤트를 추가하려면 JavaScript에서addEventListener()함수를 사용할 수 있습니다. 이 함수는 함수가 포함 된 이벤트를 객체에 추가합니다. 예를 들어, 개체 창에 이벤트를 추가하여 너비와 높이를 가져와 웹 페이지에 표시해 보겠습니다. 아래 코드를 참조하십시오.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span>Width = </span><span id="SpanID1"></span>
<br />
<span>Height = </span><span id="SpanID2"></span>
<script type="text/javascript">
start();
window.addEventListener('resize', start);
function start(){
document.getElementById('SpanID1').innerText = document.documentElement.clientWidth;
document.getElementById('SpanID2').innerText = document.documentElement.clientHeight;
}
</script>
</body>
</html>
출력:
Width = 798
Height = 779
위의 코드에서Width=라는 텍스트가있는 범위를 추가 한 후 본문 섹션에 ID가SpanID1인 빈 범위를 추가했습니다. 커서를 새 줄로 이동하기 위해br태그를 추가하고 새 줄에Height=텍스트가있는 또 다른 범위를 추가 한 다음 ID가SpanID2인 또 다른 빈 범위를 추가했습니다.
스팬의 ID는 JavaScript에서 요소를 가져 오는 데 사용됩니다. 스크립트 태그에는 창 너비와 높이로 두 범위의 텍스트를 변경하는 데 사용되는start()함수가 있습니다. start()함수 뒤에, 사용자가 창 크기를 조정할 때start()함수를 호출하는 resize 이벤트를 추가했습니다. 창의 너비와 높이가 페이지에 표시되고 창의 크기가 변경됨에 따라 변경됩니다. 위 코드를 HTML 파일에 저장하고 아무 브라우저에서나 열고 크기를 변경하여 코드가 작동하는지 여부를 확인할 수 있습니다. 또한addEventListener()함수를 사용하여 체크 박스와 같은 모든 객체에 이벤트를 추가 할 수 있습니다.
JavaScript에서onresize()함수를 사용하여 크기 조정 이벤트 추가
창에 크기 조정 이벤트를 추가하려면 JavaScript에서onresize()함수를 사용할 수 있습니다. 이 함수는 창의 크기가 변경 될 때 발생할 일을 지정하는 데 사용됩니다. 예를 들어, 개체 창에 이벤트를 추가하여 너비와 높이를 가져와 웹 페이지에 표시해 보겠습니다. 아래 코드를 참조하십시오.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span>Width = </span><span id="SpanID1"></span>
<br />
<span>Height = </span><span id="SpanID2"></span>
<script type="text/javascript">
start();
window.onresize = start;
function start(){
document.getElementById('SpanID1').innerText = document.documentElement.clientWidth;
document.getElementById('SpanID2').innerText = document.documentElement.clientHeight;
}
</script>
</body>
</html>
출력:
Width = 798
Height = 779
위 코드에서 창 크기가 변경되면start()함수가 호출됩니다. 보시다시피 출력은 위의 방법과 동일합니다.
