자바스크립트(JavaScript)와 HTML의 상호작용은 이벤트(event)를 통해 이루어집니다. 이벤트란 사용자나 브라우저가 웹 페이지를 조작할 때 발생하는 다양한 동작을 의미합니다.
예를 들어, 페이지가 로드되는 것도 하나의 이벤트이고, 사용자가 버튼을 클릭하는 행위 역시 이벤트입니다. 그 외에도 키보드의 아무 키나 누르는 것, 창을 닫거나 크기를 조절하는 것 등 모두 이벤트에 해당합니다.
대표적인 이벤트 종류
- 페이지 로딩(load)
- 버튼 클릭(click)
- 키보드 입력(keypress)
- 창 닫기(close)
- 창 크기 조절(resize)
이번 글에서는 가장 많이 사용되는 이벤트 타입들을 실제 예제 코드와 함께 살펴보겠습니다.
1. onclick 이벤트
onclick은 가장 빈번하게 사용되는 이벤트 타입으로, 사용자가 마우스 왼쪽 버튼을 클릭했을 때 발생합니다. 이 이벤트에 입력값 검증(validation)이나 경고 메시지 표시 같은 기능을 연결할 수 있습니다.
다음 예제는 버튼을 클릭하면 'Hello World'라는 알림 창을 띄우는 코드입니다.
<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>동작 방식
HTML 버튼 요소에 onclick="sayHello()" 속성을 지정하면, 버튼이 클릭되는 순간 자바스크립트의 sayHello() 함수가 호출되어 알림 창이 나타납니다.
2. onmouseover와 onmouseout 이벤트
이 두 가지 이벤트 타입은 이미지나 텍스트에 다양한 시각적 효과를 적용할 때 유용하게 활용됩니다.
- onmouseover: 마우스 포인터가 특정 요소 위로 진입할 때 발생
- onmouseout: 마우스 포인터가 해당 요소에서 벗어날 때 발생
다음 예제는 div 영역에 마우스를 올리거나 뗐을 때 각각 다른 문구가 출력되도록 구현한 코드입니다.
<html>
<head>
<script>
function over() {
document.write("Mouse Over");
}
function out() {
document.write("Mouse Out");
}
</script>
</head>
<body>
<p>div 영역 안으로 마우스를 가져가 보세요.</p>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>활용 팁
onmouseover와 onmouseout은 단순히 텍스트를 출력하는 것 외에도, 이미지 교체, 색상 변경, 툴팁(tooltip) 표시 등 다양한 인터랙티브 효과를 만드는 데 널리 사용됩니다. 두 이벤트를 함께 사용하면 마우스가 요소에 들어오고 나가는 순간을 정확하게 감지하여 자연스러운 사용자 경험(UX)을 제공할 수 있습니다.
마무리
이벤트 핸들러는 자바스크립트로 인터랙티브한 웹 페이지를 만들기 위한 핵심 개념입니다. onclick, onmouseover, onmouseout처럼 HTML 속성에 직접 이벤트를 지정하는 방식은 초보자에게 직관적이며, 이후에는 addEventListener() 메서드를 활용한 더 유연하고 현대적인 이벤트 처리 방식도 함께 익혀두면 좋습니다.