JavaScript에서 지원하는 주요 HTML 이벤트
JavaScript는 웹 페이지에서 발생하는 다양한 사용자 동작(마우스 클릭, 더블 클릭, 드래그 앤 드롭 등)에 반응할 수 있도록 여러 가지 HTML 이벤트를 제공합니다. 개발자는 이러한 이벤트 속성을 활용해 사용자의 행동에 맞춰 동적으로 페이지를 제어할 수 있습니다.
아래 표는 JavaScript에서 지원하는 대표적인 HTML 이벤트 속성과 각각의 발생 시점을 정리한 것입니다.
| 속성 | 값 | 설명 |
|---|---|---|
| onclick | script | 마우스로 요소를 클릭했을 때 발생합니다. |
| oncontextmenu | script | 컨텍스트 메뉴(마우스 오른쪽 버튼 메뉴)가 열릴 때 발생합니다. |
| ondblclick | script | 마우스로 요소를 더블 클릭했을 때 발생합니다. |
| ondrag | script | 요소가 드래그되는 동안 발생합니다. |
| ondragend | script | 드래그 작업이 종료되었을 때 발생합니다. |
| ondragenter | script | 드래그된 요소가 유효한 드롭 대상 영역에 진입했을 때 발생합니다. |
| ondragleave | script | 드래그된 요소가 유효한 드롭 대상 영역을 벗어났을 때 발생합니다. |
| ondragover | script | 드래그된 요소가 유효한 드롭 대상 위를 지나갈 때 발생합니다. |
| ondragstart | script | 드래그 작업이 시작되는 순간 발생합니다. |
| ondrop | script | 드래그 중이던 요소가 드롭되었을 때 발생합니다. |
| ondurationchange | script | 오디오·비디오 등 미디어의 재생 길이가 변경되었을 때 발생합니다. |
이벤트 속성 사용 방법
위 이벤트 속성은 HTML 태그에 직접 추가하거나, JavaScript의 addEventListener() 메서드를 통해 등록할 수 있습니다. 예를 들어 버튼을 클릭했을 때 특정 함수를 실행하려면 다음과 같이 작성합니다.
<button onclick="myFunction()">클릭</button>활용 시 참고 사항
- 모든 이벤트 속성의 값에는 실행할 JavaScript 코드(script)를 지정합니다.
- HTML에 인라인으로 이벤트를 작성하는 것보다 addEventListener()를 사용하는 것이 코드 분리와 유지보수 측면에서 더 권장됩니다.
- 드래그 관련 이벤트(ondrag 계열)는 HTML5 Drag and Drop API와 함께 사용되며, 파일 업로드 UI나 순서 변경 기능 등을 구현할 때 유용합니다.