Types of Event

사용자의 모든 움직임을 포착하는 이벤트(Event)의 종류에 대해 알아보겠습니다.

웹 페이지에서 발생하는 이벤트는 매우 다양하며, 이를 적절히 활용하면 생동감 넘치는 웹 사이트를 만들 수 있습니다.

---

1. 마우스 이벤트 (Mouse Events)

사용자가 마우스를 움직이거나 클릭할 때 발생하는 이벤트입니다. 가장 흔하게 사용되는 이벤트들입니다.

• click: 요소를 클릭했을 때 발생합니다.
• dbclick: 요소를 더블 클릭했을 때 발생합니다.
• mouseenter / mouseleave: 마우스 포인터가 요소 안으로 들어오거나 나갈 때 발생합니다. (Hover 효과 구현 시 사용)
• mousemove: 마우스가 요소 위에서 움직이는 동안 계속 발생합니다.

---

2. 키보드 이벤트 (Keyboard Events)

사용자가 키보드의 키를 누르거나 뗐을 때 발생하며, 주로 입력창(input)에서 자주 사용됩니다.

• keydown: 키를 누르는 순간 발생합니다. (모든 키에 반응)
• keyup: 눌렀던 키에서 손을 떼는 순간 발생합니다.
• keypress: 키를 누르고 있는 상태에서 발생합니다. (최신 표준에서는 keydown 사용을 권장합니다.)

---

3. 문서 로딩 이벤트 (Document Loading Events)

웹 페이지가 브라우저에 표시되는 과정에서 발생하는 이벤트입니다. 스크립트가 실행될 안전한 시점을 파악할 때 필수적입니다.

• DOMContentLoaded: HTML 문서가 완전히 로드되고 DOM 트리가 완성되었을 때 발생합니다. (이미지나 스타일시트 로드를 기다리지 않아 빠릅니다.)
• load: 페이지에 포함된 모든 리소스(이미지, CSS 등)가 완전히 로드되었을 때 발생합니다.
• resize: 브라우저 창의 크기를 조절할 때 발생합니다.
• scroll: 사용자가 페이지를 스크롤할 때 발생합니다.

---

4. 폼 이벤트 (Form Events)

로그인창, 회원가입 등 양식(form)과 관련된 요소에서 발생하는 이벤트입니다.

• submit: 폼의 전송 버튼을 눌렀을 때 발생합니다. (주로 e.preventDefault()와 함께 사용)
• focus: 입력창에 커서가 깜빡이며 활성화되었을 때 발생합니다.
• blur: 입력창에서 커서가 빠져나갔을 때(포커스를 잃었을 때) 발생합니다.
• change: 입력 내용이 바뀌고 포커스를 잃었을 때 발생합니다. (체크박스나 선택창에서 유용)

---

📋 주요 이벤트 요약 표

카테고리	이벤트 이름	발생 시점
마우스	click	요소를 마우스로 클릭했을 때
키보드	keydown	키보드의 키를 누르는 순간
문서 로딩	DOMContentLoaded	DOM 구조가 완성되어 조작이 가능할 때
폼	submit	사용자가 데이터를 제출(전송)할 때
폼	change	입력값이 바뀌고 다른 곳을 클릭했을 때

---

🖥️ 실전 예제 코드: "종합 이벤트 처리"

JavaScript

 

// 1. 폼 전송 이벤트
const loginForm = document.querySelector('#login-form');
loginForm.addEventListener('submit', (e) => {
    e.preventDefault(); // 페이지 새로고침 방지
    alert("로그인을 시도합니다.");
});

// 2. 입력창 포커스 이벤트
const inputField = document.querySelector('input');
inputField.addEventListener('focus', (e) => {
    e.target.style.backgroundColor = "lightyellow";
});

// 3. 윈도우 스크롤 이벤트
window.addEventListener('scroll', () => {
    console.log("현재 스크롤 위치:", window.scrollY);
});

---

학습 정리

• 마우스 이벤트는 클릭과 이동을 감지하여 UI 상호작용을 돕는다.
• 키보드 이벤트는 텍스트 입력이나 단축키 기능을 만들 때 사용한다.
• 문서 로딩 이벤트는 자바스크립트가 안전하게 실행될 시점을 결정한다.
• 폼 이벤트는 사용자가 입력한 데이터를 서버로 보내기 전 검증할 때 필수적이다.

---

다양한 이벤트의 종류에 대해 모두 학습하셨습니다!

---