🌱 오늘의 주제 : DOM 이벤트의 주요 유형과 활용 가이드
🌱 DOM 이벤트의 주요 유형과 활용 가이드
1. 마우스 이벤트
사용자의 마우스 동작과 관련된 이벤트입니다.
- click: 요소를 클릭할 때 발생.
- 예: 버튼을 클릭했을 때.
- dblclick: 요소를 더블클릭(빠르게 두 번 클릭)할 때 발생.
- mousedown: 마우스 버튼을 누를 때 발생.
- mouseup: 마우스 버튼을 뗄 때 발생.
- mousemove: 마우스를 움직일 때 발생.
- mouseover: 요소 위로 마우스가 올라갔을 때 발생.
- mouseout: 요소에서 마우스가 벗어났을 때 발생.
- mouseenter: 마우스가 요소에 진입할 때 발생(버블링이 없음).
- mouseleave: 마우스가 요소를 떠날 때 발생(버블링이 없음).
2. 키보드 이벤트
키보드와 관련된 동작을 처리하는 이벤트입니다.
- keydown: 사용자가 키를 누를 때 발생.
- keypress: 키를 누르고 있을 때 발생 (더 이상 사용 권장되지 않음, 대신 keydown/keyup 사용).
- keyup: 사용자가 키를 뗄 때 발생.
3. 입력 및 폼 이벤트
사용자의 입력과 폼 요소와 관련된 이벤트입니다.
- input: 사용자가 입력 필드에 값을 입력할 때마다 발생.
- change: 폼 요소의 값이 변경된 후 포커스가 벗어날 때 발생.
- submit: 폼이 제출될 때 발생.
- focus: 요소가 포커스를 얻었을 때 발생.
- blur: 요소가 포커스를 잃었을 때 발생.
4. 드래그 앤 드롭 이벤트
드래그 앤 드롭 동작과 관련된 이벤트입니다.
- dragstart: 드래그가 시작될 때 발생.
- drag: 드래그 중에 발생.
- dragend: 드래그가 끝났을 때 발생.
- dragover: 드래그 중인 요소가 대상 위로 지나갈 때 발생.
- drop: 드래그된 요소가 드롭될 때 발생.
5. 터치 이벤트 (모바일 장치)
터치 스크린 장치에서 사용되는 이벤트입니다.
- touchstart: 사용자가 화면을 터치할 때 발생.
- touchmove: 사용자가 화면을 터치한 상태로 이동할 때 발생.
- touchend: 터치가 끝났을 때 발생.
6. 윈도우 이벤트
브라우저 창 또는 문서의 상태 변화와 관련된 이벤트입니다.
- load: 웹 페이지가 완전히 로드된 후 발생.
- unload: 사용자가 페이지를 떠날 때 발생.
- resize: 브라우저 창 크기가 변경될 때 발생.
- scroll: 사용자가 페이지를 스크롤할 때 발생.
- beforeunload: 사용자가 페이지를 떠나기 전에 발생 (경고 메시지 표시 가능).
7. 클립보드 이벤트
복사, 잘라내기, 붙여넣기와 관련된 이벤트입니다.
- copy: 사용자가 복사 작업을 수행할 때 발생.
- cut: 사용자가 잘라내기 작업을 수행할 때 발생.
- paste: 사용자가 붙여넣기 작업을 수행할 때 발생.
8. 기타 이벤트
- contextmenu: 마우스 오른쪽 버튼 클릭으로 컨텍스트 메뉴가 열릴 때 발생.
- error: 문서나 이미지 로드 중 오류가 발생했을 때 발생.
- animationstart: CSS 애니메이션이 시작될 때 발생.
- animationend: CSS 애니메이션이 끝날 때 발생.
- transitionend: CSS 트랜지션이 끝날 때 발생.
🌱 예시
const button = document.querySelector('button');
// 마우스 클릭 이벤트
button.addEventListener('click', () => {
console.log('Button clicked!');
});
// 키보드 이벤트
document.addEventListener('keydown', (event) => {
console.log(`Key pressed: ${event.key}`);
});
// 스크롤 이벤트
window.addEventListener('scroll', () => {
console.log('Page scrolled!');
});
