onClick 이벤트는 웹 개발에서 가장 많이 사용되는 이벤트 유형 중 하나입니다. 사용자가 마우스 왼쪽 버튼을 클릭하는 순간 발생하며, 이 시점에 원하는 자바스크립트 함수를 실행할 수 있습니다.
이 이벤트를 활용하면 입력값 검증(유효성 검사), 경고 메시지 표시, 팝업 창 띄우기 등 다양한 상호작용 기능을 손쉽게 구현할 수 있습니다.
기본 사용 방법
HTML 요소에 onclick 속성을 추가하고, 그 값으로 호출하고 싶은 자바스크립트 함수 이름을 넣으면 됩니다. 버튼을 클릭하면 해당 함수가 자동으로 실행됩니다.
예제 코드
아래 예제는 onClick 이벤트를 통해 자바스크립트 함수를 호출하는 가장 기본적인 형태입니다. 버튼을 클릭하면 display() 함수가 실행되어 알림 창이 나타납니다.
<html>
<head>
<script>
function display() {
alert("Hello World");
}
</script>
</head>
<body>
<p>아래 버튼을 클릭해 보세요.</p>
<form>
<input type="button" onclick="display()" value="클릭하세요" />
</form>
</body>
</html>
코드 설명
<head> 영역: <script> 태그 안에 display() 함수를 정의합니다. 이 함수는 호출되면 alert()을 통해 "Hello World"라는 메시지를 화면에 표시합니다.
<body> 영역: <input type="button"> 요소에 onclick="display()" 속성을 지정했습니다. 사용자가 이 버튼을 클릭하면 브라우저가 자동으로 display() 함수를 호출합니다.
참고: 최신 방식
HTML 속성에 직접 함수를 연결하는 위 방식은 간단하지만, 규모가 큰 프로젝트에서는 HTML과 자바스크립트 코드를 분리하는 것이 좋습니다. 최신 개발에서는 아래와 같이 addEventListener를 사용하는 방식이 권장됩니다.
<button id="myBtn">클릭하세요</button>
<script>
document.getElementById("myBtn").addEventListener("click", function() {
alert("Hello World");
});
</script>
두 방식 모두 동일한 결과를 제공하지만, addEventListener는 하나의 요소에 여러 이벤트 핸들러를 등록할 수 있고 코드 관리가 더 용이하다는 장점이 있습니다.