JavaScript 이벤트란 무엇인가? 개념부터 주요 HTML5 이벤트까지 한눈에 보기

JavaScript와 HTML의 상호작용은 이벤트(Event)를 통해 처리됩니다. 이벤트란 사용자나 브라우저가 웹 페이지를 조작할 때 발생하는 다양한 동작을 의미합니다.

이벤트의 기본 개념

가장 대표적인 예로, 웹 페이지가 로드되는 순간도 하나의 이벤트입니다. 사용자가 버튼을 클릭하는 행위 역시 클릭 이벤트에 해당합니다. 그 외에도 키보드의 아무 키나 누르는 것, 창을 닫거나 크기를 조절하는 동작 등 모두 이벤트로 분류됩니다.

개발자는 이러한 이벤트를 활용하여 JavaScript 코드로 작성된 응답을 실행할 수 있습니다. 예를 들어 버튼 클릭 시 창을 닫거나, 사용자에게 메시지를 표시하거나, 입력된 데이터의 유효성을 검사하는 등 상상할 수 있는 거의 모든 유형의 반응을 구현할 수 있습니다.

아래 표는 자주 사용되는 HTML5 표준 이벤트 속성과 그 설명을 정리한 것입니다.

속성	값	설명
onoffline	script	문서가 오프라인 상태가 될 때 실행됩니다.
onabort	script	중단(abort) 이벤트가 발생할 때 실행됩니다.
onafterprint	script	문서 인쇄가 완료된 후 실행됩니다.
onbeforeonload	script	문서가 로드되기 전에 실행됩니다.
onbeforeprint	script	문서가 인쇄되기 전에 실행됩니다.
onblur	script	창이 포커스를 잃을 때 실행됩니다.
oncanplay	script	미디어 재생이 가능해졌지만 버퍼링으로 일시 중지될 수 있을 때 실행됩니다.
oncanplaythrough	script	버퍼링 없이 미디어를 끝까지 재생할 수 있을 때 실행됩니다.
onchange	script	요소의 값이 변경될 때 실행됩니다.

이벤트는 JavaScript 프로그래밍의 핵심 요소입니다. 위에서 소개한 이벤트 속성들을 잘 활용하면 사용자와 상호작용하는 동적이고 반응성 높은 웹 페이지를 만들 수 있습니다.