JavaScript onclick 이벤트 완벽 가이드: 클릭 시 코드 실행하기

JavaScript의 onclick 이벤트는 사용자가 버튼이나 다른 웹 요소를 클릭했을 때 지정된 함수를 실행하는 기능입니다. 이 방식은 HTML 문서 내에 인라인으로 작성할 수도 있고, 별도의 JavaScript 파일에서 사용할 수도 있습니다.

JavaScript로 개발을 하다 보면 사용자가 웹 페이지와 상호작용하는 순간에 특정 코드를 실행하고 싶어지는 경우가 많습니다. 예를 들어, 사용자가 버튼을 눌렀을 때 어떤 동작이 일어나도록 만들고 싶다면 어떻게 해야 할까요?

바로 이럴 때 onclick 이벤트가 유용합니다. onclick은 가장 널리 사용되는 이벤트 유형 중 하나로, 사용자가 웹 페이지의 버튼이나 다른 요소를 클릭하는 순간 원하는 코드를 실행할 수 있게 해줍니다.

이 글에서는 onclick 함수가 어떻게 동작하는지 하나씩 살펴보고, 실제 코드에 적용해 웹 사이트를 인터랙티브하게 만드는 방법까지 알아보겠습니다.

이벤트(Event) 기본 개념 복습

onclick은 JavaScript 이벤트의 한 종류입니다. 이벤트란 브라우저 안에서 발생하는 동작으로, 사용자 또는 브라우저 자체에 의해 시작될 수 있습니다. 버튼 클릭, 폼 제출, 키보드 입력 등이 모두 이벤트의 예입니다. 이번 튜토리얼에서는 그중에서도 '사용자가 요소를 클릭하는 이벤트'에 집중해 보겠습니다.

이벤트를 활용하면 개발자는 웹 페이지를 인터랙티브하게 만들 수 있습니다. 예를 들어 버튼을 클릭하면 폼이 나타나도록 하거나, 폼을 제출했을 때 사용자에게 메시지를 보여줄 수도 있습니다.

이벤트를 구성하는 핵심 요소는 두 가지입니다. 바로 이벤트 핸들러(event handler)와 이벤트 리스너(event listener)입니다.

버튼을 클릭하거나 키를 누르거나 요소 위에 마우스를 올리면 이벤트가 발생합니다. 이때 이벤트 핸들러는 이벤트가 발생했을 때 실제로 실행되는 코드를 의미합니다. 예를 들어 버튼을 클릭하면 해당 이벤트 핸들러가 실행되는 것이죠.

반면 이벤트 리스너는 버튼 같은 요소에 부착되어 사용자의 상호작용을 '듣고' 기다리는 역할을 합니다. 사용자가 해당 요소와 상호작용하면, 리스너가 이벤트 핸들러를 실행합니다.

JavaScript onclick이란?

JavaScript의 onclick 이벤트는 버튼이나 다른 웹 요소를 클릭했을 때 함수를 실행합니다. 예를 들어 onclick 이벤트를 사용하면 버튼을 클릭하는 순간 대화상자(다이얼로그)를 띄울 수 있습니다.

HTML에서 onclick 메서드를 사용하는 기본 문법은 다음과 같습니다.

<button onclick="codetorun">Click me</button>

이렇게 작성된 HTML 버튼을 클릭하면 "codetorun"이라는 JavaScript 함수가 실행됩니다. 참고로 onclick은 버튼에만 쓸 수 있는 것이 아니라 div 같은 다른 요소에도 적용할 수 있습니다.

물론 순수 JavaScript 코드에서도 onclick을 사용할 수 있습니다. 아래는 JavaScript에서 onclick 메서드를 사용하는 예시입니다.

var item = document.getElementById("button");
item.onclick = function() {
	// 실행할 코드...
}

위 코드에서는 JavaScript의 getElementById 메서드를 사용해 웹 페이지에서 요소를 가져옵니다. 그리고 ID가 "button"인 요소를 클릭하면 onclick 함수가 실행됩니다.

버튼 onclick JavaScript 예제

이번에는 p 태그(문단)로 된 텍스트가 있고, 버튼을 클릭하면 그 텍스트가 변경되는 예제를 만들어 보겠습니다. onclick 속성을 사용하면 이 기능을 손쉽게 구현할 수 있습니다. 먼저 버튼과 텍스트가 있는 HTML 페이지를 준비하고, 이벤트 코드를 담을 별도의 JavaScript 파일도 함께 만들겠습니다.

index.html

<!DOCTYPE html>
<html>

<head>
	<title>onclick example</title>
</head>
<!-- 코드의 본문 -->
<body>
	<button>Click here.</button>

	<p>This text will change when you click the button.</p>
</body>

<!-- JavaScript 이벤트 코드 불러오기 -->
<script src="js/onclick.js"></script>

</html>

이것은 기본적인 웹 페이지의 예시지만, 아직 인터랙티브하지는 않습니다. 페이지를 실행하면 버튼과 텍스트가 보이긴 하지만, 버튼을 클릭해도 아무 일도 일어나지 않습니다. 아직 onclick 스크립트 함수를 구현하지 않았기 때문입니다.

웹 페이지가 준비되었으니 이제 onclick 이벤트를 만들어 보겠습니다. 먼저 버튼에 onclick() 이벤트 리스너를 추가해야 합니다. 이 이벤트는 사용자가 버튼을 클릭하는 순간을 감지합니다.

index.html

...
<body>
	<button onclick="changeParagraph()">Click here.</button>

	<p>This text will change when you click the button.</p>
</body>
...

이제 changeParagraph() 이벤트의 코드를 담을 "onclick.js" 파일을 생성하겠습니다. 이 함수는 문단(p 요소)의 텍스트를 다른 내용으로 변경하는 역할을 합니다.

onclick.js

const changeParagraph = () => {
	const paragraph = document.querySelector("p");
	paragraph.textContent = "This text has changed because you clicked the button.";
}

여기서 우리는 changeParagraph라는 JavaScript 함수를 정의했습니다. querySelector 메서드를 사용해 페이지에서 문단을 선택하고, 버튼이 클릭되면 해당 문단의 텍스트를 새로운 내용으로 바꿉니다.

페이지를 처음 로드하면 버튼과 "버튼을 클릭하면 이 텍스트가 변경됩니다"라는 문구가 보입니다. 그리고 버튼을 클릭하면 웹 페이지가 아래와 같이 변경되어 새로운 텍스트가 표시됩니다.

JavaScript onclick 이벤트 완벽 가이드: 클릭 시 코드 실행하기

마무리

정리하자면, onclick()은 웹 페이지의 요소가 클릭되었을 때 특정 코드를 실행할 수 있게 해주는 JavaScript 이벤트입니다.

지금까지 살펴본 코드를 활용하면 버튼을 눌렀을 때 코드가 실행되는 웹 페이지를 성공적으로 만들 수 있습니다. 위 예제에서는 단순히 텍스트만 변경했지만, 여러분의 필요에 따라 코드를 더 복잡하게 만들 수도 있고 더 간단하게 유지할 수도 있습니다.

예를 들어 버튼을 클릭했을 때 사용자에게 알림을 보여주고 싶다면 JavaScript의 alert() 함수를 사용하면 됩니다. if 조건문을 코드에 추가하는 것도 물론 가능합니다.

JavaScript 학습에 도움이 되는 자료가 더 필요하다면, 관련 학습 가이드를 함께 참고해 보시기 바랍니다.