자바스크립트 document 객체

웹 페이지를 개발하다 보면 사용자와 상호작용하는 부분에서 다양한 이벤트가 발생합니다. 이벤트는 사용자가 웹페이지가 아닌 브라우저의 UI, 키보드, 마우스, 그리고 요소의 포커스와 관련하여 발생할 수 있습니다. 이번 포스팅에서는 주요 이벤트 타입과 간단한 예시 코드를 살펴보겠습니다.

1. UI 이벤트 - load
   웹페이지 로드가 완료되었을 때 발생하는 이벤트입니다. 아래는 해당 이벤트에 대한 예시 코드입니다.

window.addEventListener('load', function() {
  alert('페이지 로드가 완료되었습니다!');
});

2. 키보드 이벤트 - keydown
   사용자가 키보드를 처음 눌렀을 때 발생하는 이벤트입니다. 아래는 해당 이벤트에 대한 예시 코드입니다.

document.getElementById('myInput').addEventListener('keydown', function(event) {
  console.log('Key pressed:', event.key);
});

3. 마우스 이벤트 - click
   사용자가 동일한 요소 위에서 마우스 버튼을 눌렀다 땔 때 발생하는 이벤트입니다. 아래는 해당 이벤트에 대한 예시 코드입니다.

document.getElementById('myButton').addEventListener('click', function() {
  alert('버튼이 클릭되었습니다!');
});

4. 포커스 이벤트 - focus, blur
   요소가 포커스를 얻거나 잃을 때 발생하는 이벤트입니다. 아래는 해당 이벤트에 대한 예시 코드입니다.

document.getElementById('myInput').addEventListener('focus', function() {
  console.log('Input 요소가 포커스를 얻었습니다!');
});

document.getElementById('myInput').addEventListener('blur', function() {
  console.log('Input 요소가 포커스를 잃었습니다!');
});