자바스크립트(JavaScript)와 HTML의 상호작용은 사용자나 브라우저가 웹 페이지를 조작할 때 발생하는 이벤트(Event)를 통해 처리됩니다.
예를 들어 페이지가 로드되는 것 자체가 하나의 이벤트이며, 사용자가 버튼을 클릭하는 행위 역시 이벤트입니다. 그 외에도 키보드의 아무 키나 누르기, 창 닫기, 창 크기 조절 같은 동작들이 모두 이벤트에 해당합니다. 이벤트는 DOM(Document Object Model) 레벨 3의 일부로, 모든 HTML 요소는 자바스크립트 코드를 실행시킬 수 있는 고유한 이벤트 집합을 가지고 있습니다.
onclick 이벤트 예제
가장 널리 사용되는 이벤트 유형은 onclick 이벤트로, 사용자가 마우스 왼쪽 버튼을 클릭했을 때 발생합니다. 이 이벤트에는 폼 유효성 검사, 경고 메시지 표시 등 다양한 로직을 연결할 수 있습니다.
<html>
<head>
<script>
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<p>아래 버튼을 클릭하고 결과를 확인해 보세요</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</form>
</body>
</html>
코드 설명
버튼 요소의 onclick 속성에 sayHello() 함수를 연결해 두면, 사용자가 버튼을 클릭하는 순간 해당 함수가 실행되어 "Hello World"라는 문구가 담긴 경고창(alert)이 화면에 나타납니다. 이처럼 이벤트 속성을 활용하면 별도의 복잡한 설정 없이도 사용자의 동작에 즉각 반응하는 인터랙티브한 페이지를 만들 수 있습니다.
자주 사용되는 주요 이벤트 종류
- onclick — 요소를 클릭했을 때 발생
- onload — 페이지나 이미지의 로딩이 완료되었을 때 발생
- onchange — 입력 필드 등 요소의 값이 변경되었을 때 발생
- onmouseover / onmouseout — 마우스 포인터가 요소 위에 진입하거나 벗어났을 때 발생
- onkeydown / onkeyup — 키보드 키를 누르거나 뗄 때 발생
이 외에도 HTML 요소마다 다양한 이벤트가 제공되므로, 상황에 맞는 이벤트를 적절히 활용하면 사용자 경험을 크게 향상시킬 수 있습니다.