반응형
자바스크립트 이벤트 속성은 HTML 요소에서 특정 동작(클릭, 키 입력, 마우스 이동 등)이 발생했을 때 실행되는 이벤트 핸들러 속성을 말합니다.
아래에 주요 이벤트 속성들을 카테고리별로 정리했습니다.
- 마우스 관련 이벤트
- 키보드 관련 이벤트
- 폼(form) 관련 이벤트
- 윈도우/문서 관련 이벤트
- 드래그 & 드롭 관련 이벤트
- 기타
1. 마우스 관련 이벤트
| 이벤트 속성 | 설명 |
| onclick | 요소를 클릭했을 때 실행 https://coding-abc.tistory.com/388 |
| ondblclick | 요소를 더블 클릭했을 때 실행 |
| onmousedown | 마우스를 누를 때 실행 |
| onmouseup | 마우스를 뗄 때 실행 |
| onmousemove | 마우스를 움직일 때 실행 |
| onmouseover | 마우스를 요소 위에 올렸을 때 실행 |
| onmouseout | 마우스가 요소에서 벗어날 때 실행 |
| onmouseenter | 요소에 마우스가 들어왔을 때 실행(버블링 없음) |
| onmouseleave | 요소에서 마우스가 나갔을 때 실행(버블링 없음) |
2. 키보드 관련 이벤트
| 이벤트 속성 | 설명 |
| onkeydown | 키를 누를 때 실행 |
| onkeyup | 키를 뗄 때 실행 |
| onkeypress | 키를 누를 때 실행(단, 일부 키는 동작하지 않음, 최신 브라우저에서는 비추천) |
3. 폼(form) 관련 이벤트
| 이벤트 속성 | 설명 |
| onsubmit | 폼이 제출될 때 실행 |
| onreset | 폼이 리셋될 때 실행 |
| oninput | 입력 값이 변경될 때 실행 |
| onchange | 입력 값이 바뀌고 포커스를 잃었을 때 실행 https://coding-abc.tistory.com/389 |
| onfocus | 요소가 포커스를 얻었을 때 실행 |
| onblur | 요소가 포커스를 잃었을 때 실행 |
| onselect | 텍스트를 선택했을 때 실행 |
4. 윈도우/문서 관련 이벤트
| 이벤트 속성 | 설명 |
| onload | 문서나 이미지가 로드되었을 때 실행 |
| onunload | 문서가 닫히기 전에 실행 |
| onresize | 창 크기가 변경될 때 실행 |
| onscroll | 스크롤될 때 실행 |
| onerror | 문서나 이미지 로드 중 에러 발생 시 실행 |
5. 드래그 & 드롭 관련 이벤트
| 이벤트 속성 | 설명 |
| ondrag | 요소를 드래그하는 동안 실행 |
| ondragstart | 드래그 시작할 때 실행 |
| ondragend | 드래그가 끝났을 때 실행 |
| ondragenter | 드래그한 요소가 드롭 영역에 들어왔을 때 실행 |
| ondragleave | 드롭 영역에서 벗어났을 때 실행 |
| ondragover | 드롭 영역 위에 있을 때 실행 |
| ondrop | 드롭했을 때 실행 |
6. 기타 이벤트
| 이벤트 속성 | 설명 |
| oncontextmenu | 마우스 오른쪽 버튼 클릭 시 실행 |
| onwheel | 마우스 휠을 움직일 때 실행 |
| ontouchstart | 터치 시작할 때 실행 (모바일) |
| ontouchend | 터치가 끝날 때 실행 |
| ontouchmove | 터치하면서 움직일 때 실행 |
| onanimationstart | CSS 애니메이션 시작 시 실행 |
| onanimationend | CSS 애니메이션 끝날 때 실행 |
| ontransitionend | CSS 트랜지션 끝날 때 실행 |
예제
<!DOCTYPE html>
<html>
<body>
<button onclick="alert('버튼 클릭!')">클릭</button>
<input type="text" onfocus="console.log('포커스됨')" onblur="console.log('포커스 해제')" />
<div onmouseover="this.style.background='yellow'" onmouseout="this.style.background=''">
마우스를 올려보세요
</div>
</body>
</html>
👉 다음 포스팅에서 많이 사용되는 이벤트를 예제와 함께 설명합니다.
'자바스크립트_Javascript' 카테고리의 다른 글
| 자바스크립트: onchange 이벤트, 값이 변경될 때 발생 (0) | 2025.08.20 |
|---|---|
| 자바스크립트: onclick 이벤트, 버튼을 클릭할 때마다 문자열과 배경 변경하기 (6) | 2025.08.19 |
| 자바스크립트: 요소(element) 선택 getElementById getElementsByClassName .. (8) | 2025.08.18 |
| 자바스크립트: 로그인 페이지 만들기 (4) | 2025.08.17 |
| Javascript: 반복문 for while do of in break continue (3) | 2025.08.16 |