자바스크립트 - Window/Document 이벤트

안녕하세요, 야심 찬 코더 여러분! 오늘 우리는 자바스크립트 이벤트의 흥미로운 세상으로 뛰어들어 보겠습니다. 특히 Window와 Document 이벤트에 중점을 두겠습니다. 여러분의 친절한 이웃 컴퓨터 선생님으로서, 많은 예제와 설명을 통해 여러분을 안내해 드리겠습니다. 그러니 좋아하는 음료를 한 잔 마시고 편안하게 자리 잡아, 시작해 보겠습니다!

Window 이벤트

Window 이벤트는 브라우저 창 자체와 관련된 행동입니다. 이러한 이벤트는 동적이고 반응형 웹 애플리케이션을 만들기에 매우 유용할 수 있습니다. 가장 흔한 Window 이벤트 중いくつか를 탐구해 보겠습니다.

1. load

load 이벤트는 전체 페이지가 스타일시트와 이미지와 같은 모든 종속 자원이 완전히 로드된 후 발생합니다. 이는 모든 요소가 사용 가능하기 전에 스크립트를 실행하는 데 자주 사용됩니다.

window.addEventListener('load', function() {
console.log("페이지가 완전히 로드되었습니다!");
});

이 예제에서 우리는 window 객체에 이벤트 리스너를 추가하고 있습니다. 'load' 이벤트가 발생할 때, 우리의 함수가 실행되어 콘솔에 메시지를 로그합니다.

2. resize

resize 이벤트는 브라우저 창이 크기 조정될 때 발생합니다. 이는 레이아웃을 조정하거나 크기를 다시 계산하는 데 유용할 수 있습니다.

window.addEventListener('resize', function() {
console.log("윈도우가 다음 크기로 조정되었습니다: " + window.innerWidth + "x" + window.innerHeight);
});

여기서 우리는 창이 크기 조정될 때마다 새로운 크기를 로그하고 있습니다. 이는 반응형 디자인 조정에 유용할 수 있습니다.

3. scroll

scroll 이벤트는 사용자가 창에서 스크롤할 때 발생합니다. 이는 무한 스크롤을 구현하거나 스크롤 위치에 따라 요소를 표시하거나 숨기는 데 사용될 수 있습니다.

window.addEventListener('scroll', function() {
let scrollPosition = window.scrollY;
console.log("다음 위치로 스크롤되었습니다: " + scrollPosition);

if (scrollPosition > 300) {
document.getElementById('backToTop').style.display = 'block';
} else {
document.getElementById('backToTop').style.display = 'none';
}
});

이 예제에서 우리는 사용자가 300픽셀 이상 스크롤하면 'Back to Top' 버튼을 표시합니다.

4. unload

unload 이벤트는 사용자가 페이지를 벗어날 때 발생합니다. 이는 정리 작업을 수행하거나 페이지를 벗어나기 전에 사용자에게 확인을 요청하는 데 사용될 수 있습니다.

window.addEventListener('unload', function(event) {
event.preventDefault();
event.returnValue = '';
});

이 코드는 사용자가 페이지를 벗어나려 할 때 확인 대화 상자를 띄웁니다. 이 기능은 사용자를 귀찮게 하지 않도록 조심스럽게 사용하세요!

Document 이벤트

Document 이벤트는 HTML 문서 자체와 관련이 있습니다. 이러한 이벤트는 페이지의 콘텐츠를 다양한 방법으로 상호작용할 수 있게 해줍니다. 몇 가지 중요한 Document 이벤트를 살펴보겠습니다.

1. DOMContentLoaded

DOMContentLoaded 이벤트는 초기 HTML 문서가 완전히 로드되고 해석된 후 발생하며, 외부 자원이 로드되기를 기다리지 않습니다.

document.addEventListener('DOMContentLoaded', function() {
console.log("DOM이 준비되었습니다!");
document.getElementById('myButton').addEventListener('click', function() {
alert("버튼이 클릭되었습니다!");
});
});

이 이벤트는 외부 이미지와 같은 자원이 로드되기를 기다리지 않기 때문에, 스크립트 실행이 더 빨라질 수 있습니다.

2. click

click 이벤트는 요소가 클릭될 때 발생합니다. 이는 가장 흔한 이벤트 중 하나입니다.

document.getElementById('myButton').addEventListener('click', function(event) {
console.log("버튼이 다음 좌표에서 클릭되었습니다: " + event.clientX + ", " + event.clientY);
event.target.style.backgroundColor = 'red';
});

이 예제에서 우리는 클릭된 좌표를 로그하고 버튼의 색상을 변경합니다.

3. keydown과 keyup

이 이벤트는 키가 눌러지면 (keydown) 또는 떼어지면 (keyup) 발생합니다.

document.addEventListener('keydown', function(event) {
console.log("눌러진 키: " + event.key);
if (event.key === 'Enter') {
document.getElementById('submitButton').click();
}
});

이 코드는 모든 키 누르기를 로그하고 Enter 키가 눌리면 제출 버튼을 클릭합니다.

4. mouseover과 mouseout

이 이벤트는 마우스 포인터가 요소에 진입(mouseover)하거나 벗어나(mouseout)할 때 발생합니다.

let hoverElement = document.getElementById('hoverMe');

hoverElement.addEventListener('mouseover', function() {
this.style.backgroundColor = 'yellow';
});

hoverElement.addEventListener('mouseout', function() {
this.style.backgroundColor = '';
});

이 코드는 마우스가 요소 위에 있을 때 배경색을 변경하는 간단한 호버 효과를 생성합니다.

이벤트 메서드 표

여기서는 우리가 논의한 메서드를 요약한 유용한 표를 제공합니다:

이벤트	설명	예제
load	페이지가 완전히 로드될 때 발생	window.addEventListener('load', function() {...})
resize	창이 크기 조정될 때 발생	window.addEventListener('resize', function() {...})
scroll	창이 스크롤될 때 발생	window.addEventListener('scroll', function() {...})
unload	페이지를 벗어날 때 발생	window.addEventListener('unload', function(event) {...})
DOMContentLoaded	DOM이 준비되었을 때 발생	document.addEventListener('DOMContentLoaded', function() {...})
click	요소가 클릭될 때 발생	element.addEventListener('click', function(event) {...})
keydown	키가 눌러질 때 발생	document.addEventListener('keydown', function(event) {...})
keyup	키가 떼어질 때 발생	document.addEventListener('keyup', function(event) {...})
mouseover	마우스가 요소에 진입할 때 발생	element.addEventListener('mouseover', function() {...})
mouseout	마우스가 요소를 벗어날 때 발생	element.addEventListener('mouseout', function() {...})

그리고 여러분! 우리는 자바스크립트의 Window와 Document 이벤트 기본 내용을 다couvert했습니다. 연습이 완벽을 만들어 줍니다, 그러니 자신의 프로젝트에서 이 이벤트들을 실험해 보지 마세요. 언제쯤 여러분은 프로처럼 동적이고 반응형 웹 페이지를 만드는 솜씨를 가지게 될 것입니다!

행복하게 코딩하시고, 여러분의 이벤트가 항상 기대대로 발생하길 바랍니다!

Credits: Image by storyset