웹 페이지에서는 다양한 상황에서 JavaScript를 실행할 수 있습니다. 사용자가 마우스를 클릭하거나, 이미지가 로딩되거나, HTML 요소를 클릭하거나, HTML 폼(form)을 제출하는 순간처럼 말입니다. 이러한 이벤트(Event)는 Document Object Model(DOM) Level 3의 일부이며, 모든 HTML 요소는 JavaScript 코드를 실행할 수 있는 고유한 이벤트 집합을 가지고 있습니다.
기본 예제
다음은 이벤트 핸들러에서 함수를 호출하여 화면의 텍스트를 변경하는 간단한 예제입니다. 문단을 클릭하면 'Click me'라는 문구가 'Welcome!'으로 바뀝니다.
<!DOCTYPE html>
<html>
<body>
<p onclick="myEvent(this)">Click me</p>
<script>
function myEvent(id) {
id.innerHTML = "Welcome!";
}
</script>
</body>
</html>
그럼 이벤트와 JavaScript의 관계를 이해할 수 있도록 몇 가지 대표적인 이벤트 타입을 살펴보겠습니다.
onclick 이벤트 타입
onclick은 가장 널리 사용되는 이벤트 타입으로, 사용자가 마우스 왼쪽 버튼을 클릭했을 때 발생합니다. 이 이벤트를 활용하면 입력값 검증, 경고 메시지 표시 등 다양한 작업을 손쉽게 처리할 수 있습니다.
예제
버튼을 클릭하면 alert 창이 나타나는 예제입니다.
<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>
onmouseover와 onmouseout
이 두 이벤트 타입은 이미지나 텍스트에 시각적인 효과를 연출할 때 매우 유용합니다. onmouseover는 마우스 포인터가 요소 위로 올라오는 순간 발생하고, onmouseout는 마우스가 해당 요소에서 벗어나는 순간 발생합니다.
예제
div 영역 안으로 마우스를 가져가면 'Mouse Over', 영역 밖으로 벗어나면 'Mouse Out'이 출력되는 예제입니다.
<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>여기는 div 영역 내부입니다</h2>
</div>
</body>
</html>
참고: 최신 방식의 이벤트 처리
위 예제들은 HTML 태그에 직접 이벤트 속성을 지정하는 인라인(inline) 방식입니다. 실무에서는 코드의 유지보수성을 높이기 위해 addEventListener() 메서드를 사용해 JavaScript 파일 내에서 이벤트를 등록하는 방식이 권장됩니다. 예를 들어 element.addEventListener('click', sayHello)처럼 작성하면 HTML과 JavaScript 코드를 분리할 수 있어 더 깔끔한 구조를 만들 수 있습니다.