자바스크립트 이벤트 완전 정복: 이벤트를 생성하는 3가지 방법

웹사이트에 인터랙티브한 기능을 더하는 것은 자바스크립트(JavaScript)가 빛을 발하는 영역입니다. HTML이 웹 페이지의 구조를, CSS가 스타일을 담당한다면, 자바스크립트를 활용하면 사이트를 훨씬 더 동적으로 만들 수 있습니다.

자바스크립트에서는 이벤트(event)를 사용해 사이트에 인터랙티브성을 부여합니다. 이 가이드에서는 자바스크립트 이벤트가 무엇인지, 이벤트를 어디에 활용할 수 있는지, 그리고 이벤트를 정의하고 호출하는 방법까지 차근차근 살펴보겠습니다.

자바스크립트 이벤트란 무엇인가?

이벤트는 브라우저나 사용자에 의해 발생하며, 웹 페이지의 상태를 변경할 수 있습니다. 예를 들어 웹 페이지에서 버튼을 클릭하면 자바스크립트 이벤트가 생성되고, 클릭 시 펼쳐지는 드롭다운 메뉴 역시 자바스크립트 이벤트를 활용한 것입니다.

자바스크립트 이벤트의 활용 범위는 매우 넓습니다. 대표적인 예는 다음과 같습니다.

폼(form)이 올바르게 작성되었는지 검사하기
폼 작성이 완료되면 사용자를 다른 페이지로 이동시키기
드롭다운 메뉴를 인터랙티브하게 만들기
이미지 확대·축소 기능 구현하기

자바스크립트에서 이벤트를 다루려면 두 가지 핵심 개념을 알아야 합니다. 바로 이벤트 핸들러(event handler)와 이벤트 리스너(event listener)입니다.

이벤트 핸들러는 웹 페이지에서 특정 이벤트가 발생했을 때 실행되는 함수입니다. 이벤트 리스너는 이벤트 함수를 HTML 요소와 연결하는 역할을 하며, 해당 함수가 실행되면 웹 요소의 상태가 변경됩니다.

이벤트 핸들러를 정의하는 방법은 크게 세 가지입니다. 인라인(inline) 이벤트 핸들러, 이벤트 속성(property), 그리고 이벤트 리스너입니다. 지금부터 각 방법을 하나씩 알아보겠습니다.

1. 인라인 이벤트 핸들러(Inline Event Handler)

자바스크립트 이벤트를 가장 쉽게 시작하는 방법은 인라인 이벤트 핸들러를 사용하는 것입니다. 이 방식은 이벤트를 HTML 파일 안에서 직접 정의합니다.

예를 들어 'JJ Smith's Bakery'라는 빵집 웹사이트를 디자인한다고 가정해 보겠습니다. 사용자가 폼을 제출하면 "응답을 받았습니다."라는 문구가 화면에 표시되도록 만들고 싶습니다.

먼저 다음 코드를 살펴보세요.

<!DOCTYPE html>
<html>
	<head>
		<title>JJ Smith's Bakery</title>
	</head>

	<script src="main.js"></script>

	<body>
		<p id="submitted"></p>
		<button onclick="submitForm()">Submit form</button>
	</body>
</html>

이 코드는 버튼 하나가 있는 단순한 웹 페이지를 렌더링합니다. 하지만 지금은 버튼을 클릭해도 아무 일도 일어나지 않습니다. 아직 이벤트 핸들러를 작성하지 않았기 때문입니다.

main.js 파일에 다음 코드를 추가해 보세요.

const submitForm = () => {
	const text = document.getElementById("submitted");
	text.textContent = "Form submitted."
}

이 코드는 ID가 "submitted"인 요소를 찾아 그 내용을 "Form submitted."로 변경합니다. 이 코드는 submitForm() 함수가 호출될 때만 실행되며, 사용자가 버튼을 클릭하는 순간 호출되도록 설정되어 있습니다.

버튼을 클릭하면 화면에 "Form submitted."라는 문구가 나타납니다. 이처럼 인라인 이벤트 핸들러만으로도 웹 페이지에 인터랙티브성을 추가할 수 있습니다. 하지만 인라인 방식이 유일한 방법은 아닙니다. 이번에는 이벤트 핸들러 속성을 활용하는 방법을 살펴보겠습니다.

2. 핸들러 속성(Handler Property)을 이용한 이벤트

인라인 핸들러 방식에서는 HTML 파일 내에 실행할 함수를 직접 명시해야 했습니다. 앞서 작성한 HTML 코드에서 버튼이 눌렸을 때 호출할 함수를 정의한 부분이 바로 이 줄입니다.

<button onclick="submitForm()">Submit form</button>

핸들러 속성을 사용하면 코드에서 "onclick" 이벤트를 제거할 수 있습니다. 덕분에 웹 페이지를 인터랙티브하게 만드는 모든 자바스크립트 코드를 별도의 파일로 옮길 수 있습니다. 이번 예제에서는 자바스크립트 코드에서 버튼을 식별할 수 있도록 버튼에 ID "button"을 부여하겠습니다. onclick 이벤트를 제거하고 ID를 할당한 코드는 다음과 같습니다.

<button id="button">Submit form</button>

버튼이 눌렸을 때 이벤트가 발생하도록 하려면 main.js 파일 안에 핸들러 속성을 사용한 이벤트를 작성해야 합니다. 사용할 코드는 다음과 같습니다.

const submitForm = () => {
	const text = document.getElementById("submitted");
	text.textContent = "Form submitted."
}

const button = document.getElementById("button")
button.onclick = submitForm;

이 코드를 실행하고 버튼을 클릭하면 앞선 예제와 동일한 결과가 출력됩니다. 버튼의 동작은 같지만 코드 작성 방식이 달라졌습니다. 이벤트 핸들러를 인라인으로 작성하는 대신 main.js 파일로 옮긴 것입니다. 이렇게 하면 인라인 이벤트가 어디서 트리거되는지 HTML 코드 전체를 뒤질 필요가 없어져, 훨씬 더 유지보수하기 좋은 코드를 작성할 수 있습니다.

3. 이벤트 리스너(Event Listener)

이벤트 리스너 역시 자바스크립트에서 이벤트를 선언하는 데 사용됩니다. 리스너는 항상 요소의 상태 변화를 감시하고 있다가, 해당 요소에 변화가 감지되면 리스너에 등록된 코드를 실행합니다.

예를 들어 이벤트 리스너가 연결된 버튼을 클릭하면, 리스너가 마우스 이벤트가 발생했음을 "듣고(hear)" 이를 감지합니다. 그런 다음 해당 이벤트 리스너에 연결된 코드를 실행하는 방식입니다.

HTML 코드는 앞선 예제와 동일하며, main.js 파일만 약간 수정하겠습니다.

const submitForm = () => {
	const text = document.getElementById("submitted");
	text.textContent = "Form submitted."
}

const button = document.getElementById("button")
button.addEventListener("click", submitForm);

이 코드에서는 addEventListener를 사용해 이벤트 리스너를 생성했습니다. 앞선 두 예제에서처럼 submitForm() 함수를 onclick 이벤트에 바인딩하는 대신, 리스너 방식을 활용한 것입니다.

첫 번째 인수로 "click"을 지정하여 마우스 포인터로 버튼이 클릭되는 순간을 감지하도록 설정했습니다. 클릭 이벤트 외에도 키보드 이벤트 등 다양한 이벤트 타입이 존재하지만, 이 튜토리얼에서는 마우스 클릭 이벤트에 집중하겠습니다.

코드를 다시 실행하고 버튼을 클릭해 보면, 출력 결과는 앞선 두 예제와 동일합니다. 하지만 이번에는 HTML 이벤트 리스너를 사용했다는 점이 다릅니다. 이벤트 리스너는 자바스크립트에서 이벤트를 선언하는 가장 최신 방식이며, 실무에서도 가장 널리 사용되는 방법입니다.

마치며

자바스크립트 이벤트를 활용하면 웹 페이지를 인터랙티브하게 만들 수 있습니다. 버튼을 누르거나, 폼을 제출하거나, 텍스트 위에 마우스를 올리는 순간 이벤트가 발생할 수 있습니다. 자바스크립트에서 이벤트를 선언하는 방법은 인라인 방식, 속성 방식, 리스너 방식 세 가지입니다.

이제 여러분도 전문 웹 개발자처럼 자바스크립트 이벤트를 자유롭게 만들 준비가 되었습니다!